JSFiddle - React, Tailwind, and code Playground
HTML
<div id="div1"><span>One</span>-free Recipes</div>
CSS
#div1{float:right;padding:20px;margin-top:40px;}
JavaScript
$(document).ready(function() {
var items = ["Two", "Three", "Four", "Five", "Six", "One"],
$text = $( '#div1 span' ),
delay = 0.05; //seconds
function loop ( delay ) {
$.each( items, function ( i, elm ){
$text.delay( delay).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 );
});