JSFiddle - React, Tailwind, and code Playground

by Vivek kt

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

      <h2>Example of using setInterval to trigger display of Div</h2>
      <p>The first div will display after 10 seconds...</p>
      
     
      
     
     <div id='container'>
       
       
       
       <div id='test' class='color1'> 
         News
      </div>
        
             
       <div id='div1' class='' style="background-color: grey;"> 
         div1
      </div>
       
      <div>
   </body>

</html>

CSS

body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; }
         .display { width:300px; height:200px; border: none; float: left; }
         .js .display { display:none; }

JavaScript

$('html').addClass('js');


function changeColor(element, curNumber){  
  curNumber++;
    
    if(curNumber > 4){
        curNumber = 1;
    }
    element.addClass('000000' + curNumber, 500);
    // So previous classes get removed.
    element.attr('class', '999999' + curNumber);
    setTimeout(function(){changeColor(element, curNumber);}, 100);  
}

changeColor($('#test'), 1);