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 () {

    $("div:first").each(function (i) {
        $(this).fadeIn(function () {
            console.log('1 - ' + $('div').queue('fx'));
            $(this).fadeOut(1000 * (i + 1), function () {
                console.log('1 - ' + $('div').queue('fx'));
            });
        });
    });

    $("div:first").promise().done(function () {
        console.log('1 - finished');
        console.log($(this).queue('fx'));
    });

    $("div:eq(1)").each(function (i) {
        $(this).fadeIn(function () {
            console.log('2 - ' + $('div').queue('fx'));
            $(this).queue('fx', []);
            $(this).fadeOut(1000 * (i + 1), function () {
                console.log('2 - ' + $('div').queue('fx'));
            });
        }).fadeOut();
    });

    $("div:eq(1)").promise().done(function () {
        console.log('2 - finished');
        console.log($(this).queue('fx'));
    });

});