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>
<p>Container queue length: <span class='queCont'></span></p>
<p>class1 queue length: <span class='queC1'></span></p>
<p>class2 queue length: <span class='queC2'></span></p>
<p>class3 queue length: <span class='queC3'></span></p>
<p>class4 queue length: <span class='queC4'></span></p>
<p>initHide queue length: <span class='queInitHide'></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);

setInterval(function(){
    $('.queCont').html(cont.queue('fx').length);
    $('.queC1').html(c1.queue('fx').length);
    $('.queC2').html(c2.queue('fx').length);
    $('.queC3').html(c3.queue('fx').length);
    $('.queC4').html(c4.queue('fx').length);
    $('.queInitHide').html(ih.queue('fx').length);
},100);


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


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

function anime(){
anime1();
anime2();    

}

function anime1(){
  activeScene += 1;
  c1.fadeIn(2000);
  c2.fadeIn(2000).delay(2000).animate({left:'200px'}, 2000, function(){
          c2.animate({left: '0px'}, 2000);
      });          
}
function anime2(){
  c3.fadeIn(2000,function(){
      c3.animate({left:'200px'}, 2000, function(){
          c3.animate({left: '0px'}, 2000);
      });          
  });
}