JSFiddle - React, Tailwind, and code Playground
HTML
<div id='mydiv' width="100"></div>
JavaScript
$.fn.loadText = function( textArray, interval ) {
return this.each( function() {
var obj = $(this);
obj.fadeOut( 'slow', function() {
obj.empty().html( random_array( textArray ) );
obj.fadeIn( 'slow' );
});
timeOut = setTimeout( function(){ obj.loadText( textArray, interval )}, interval );
if( !obj.is(':animated') ) { clearTimeout( timeOut ); obj.loadText( textArray, interval );}
});
}
function random_array( aArray ) {
var rand = Math.floor( Math.random() * aArray.length + aArray.length );
var randArray = aArray[ rand - aArray.length ];
return randArray;
}
$(document).ready( function() {
var textArray = ["murali","prashanth","nutal","candy"];
$('#mydiv').loadText( textArray, 5000 );
});