JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
  <style></style>
</head>
<body>
  <button id="show">Start Animation Queue</button>
  <p></p>
  <div id="box1"></div>
  <div id="box2"></div>
  <div id="q"></div>


</body>
</html>

CSS

#box1 { margin:3px; width:40px; height:40px;
        position:absolute; left:10px; top:60px; 
        background:green; display: none; }
#box2 { margin:3px; width:40px; height:40px;
        position:absolute; left:100px; top:60px; 
        background:red; display: none; }
p { color:red; }

JavaScript

var queue = $('#q').queue("chain");

$("#show").click(function () {
//alert();
    $("p").text("Queue length is: " + $('#q').queue("chain").length);
    
    // remove the last function from the animation queue.
    var lastFunc = $('#q').queue("chain").pop();
    // insert it at the beginning:    
    $('#q').queue("chain").unshift(lastFunc);
    
    //start animation queue
    $('#q').dequeue('chain');
});


$(function(){

     $('#q').queue('chain',function(next){  
          $("#box2").show("slow", function() { next(); });
      });
    
    
      $('#q').queue('chain',function(next){  
          $('#box1').animate(
              {left: 60}, {duration:1000, queue:false, complete: next}
          )
      });    
    
    
      $('#q').queue('chain',function(next){  
          $("#box1").animate({top:'200'},1500,  function() { next(); }); 
      });
    
    
      $('#q').queue('chain',function(next){  
          $("#box2").animate({top:'200'},1500,  function() { next(); }); 
      });
    
    
      $('#q').queue('chain',function(next){  
          $("#box2").animate({left:'500'},1500,  function() { next(); }); 
      });
    
      //notice that show effect comes last
      $('#q').queue('chain',function(next){  
          $("#box1").show("slow",  function() { next(); });
      });

    
});