JSFiddle - React, Tailwind, and code Playground

by digitalzebra

HTML

<div id="fadeIn1">
    This is my hidden div 1
</div>
<div id="fadeIn2">
    2
</div>
<div id="fadeIn3">
    3
</div>
<div id="fadeIn4">
    4
</div>

<button onclick="doEverything();">Click me</button>

CSS

div {
    display: none;
}

JavaScript

function createFadeIn(count, deferObj) {
    return function() {
        $("#fadeIn" + count).fadeIn(3000, function() {
           deferObj.resolve(); 
        });
    };
};


function doEverything() {
    
    var p = first = $.Deferred(),
        n;
    
    for (var i = 1; i < 5; i++) {
        n = $.Deferred();
        $.when(p).then(createFadeIn(i, n));
        p = n;
    }
    
    first.resolve();
};