JSFiddle - React, Tailwind, and code Playground

by twinturbotom

HTML

<div id='container'>
  <div class='initHide class1'>class1</div>
  <div class='initHide class2'>class2</div>
  <div class='initHide class3'>class3</div>
  <div class='initHide class4'>class4</div>
</div>
<button id="start">Start</button>
<button id="stop">Stop</button>
<p>Active Scene: <span class= 'status'></span></p>

CSS

#container{ Position: relative;border: 2px solid black; width: 300px; height: 200px;}
#container div{ position: relative;}
.initHide{display:none;}

JavaScript

durScene1 = 4000;
var cont = $('#container');
var c1 = $('.class1');
var c2 = $('.class2');
var c3 = $('.class3');
var c4 = $('.class4');
var ih = $('.initHide');
activeScene = 0;

setInterval(function(){
    $('.status').html(activeScene);
},100);


$("#start").click(function(){
 anime();
    
}); 


$("#stop").click(function () {
    $('div:animated').stop();
});

function anime(){
c1.fadeIn('slow',function(){
    c2.fadeIn('slow',function(){
        c2.animate({left:'200px'},2000, function(){
            c1.delay(3000).fadeOut();
            c2.delay(3000).fadeOut();
            c3.delay(3200).fadeIn('slow',function(){
                c3.animate({left:'200px'}, 2000, function(){
                    c4.fadeIn();
                });
                
            });
        });
    })
        });

}