JSFiddle - React, Tailwind, and code Playground

by vincentieo

HTML

<div id="div1">
    <span>O</span>
</div>

CSS

#div1{padding:20px;margin-top:40px;}

JavaScript

$(document).ready(function() {

    var items = ["y", "s", "t", "e", "m", "2"],
        $text = $( '#div1 span' ),
        delay = 0.2; //seconds
    
    function loop ( delay ) {
        $.each( items, function ( i, elm ){
            $text.delay( delay*1E3).fadeOut();
            $text.queue(function(){
                $text.html( items[i] );
                $text.dequeue();
            });
            $text.fadeIn();
            $text.queue(function(){
                if ( i == items.length -1 ) {
                    loop(delay);   
                }
                $text.dequeue();
            });
        });
    }

    loop( delay );
    
});