JSFiddle - React, Tailwind, and code Playground

by rvaldez

HTML

<p>The queue length is: <span></span></p>
  <div></div>

CSS

div { margin:3px; width:40px; height:40px;
        position:absolute; left:0px; top:60px;
        background:green; display:none; }
  div.newcolor { background:blue; }
  p { color:red; }

JavaScript

$(document).ready(function(){
var div = $("div");
 
function runIt() {
  div.show("slow");
  div.animate({left:'+=200'},2000);
  div.slideToggle(1000);
  div.slideToggle("fast");
  div.animate({left:'-=200'},1500);
  div.hide("slow");
  div.show(1200);
  div.slideUp("normal", runIt);
}
 
function showIt() {
  var n = div.queue("fx");
  $("span").text( n.length );
  setTimeout(showIt, 100);
}
 
runIt();
showIt();
    });