JSFiddle - React, Tailwind, and code Playground

by Dave Salomon

HTML

<button>Go</button>
<p>Ready...</p>
<div></div>
<div></div>
<div></div>
<div></div>

CSS

div {
      height: 50px;
      width: 50px;
      float: left;
      margin-right: 10px;
      display: none;
      background-color: #090;
  }

JavaScript

$("button").on("click", function () {
    $("p").append("Started...");

    $("div:first").each(function (i) {
        $(this).fadeIn(function(){
            console.log($('div').queue('fx'));
            $(this).fadeOut(1000*(i+1), function(){
                console.log($('div').queue('fx'));
                setTimeout(function(){
                    console.log($('div').queue('fx'));
                }, 100);
            });
        });
    });
    
    $("div").promise().done(function () {
        $("p").append(" Finished! ");
    });
});