JSFiddle - React, Tailwind, and code Playground

by digitalzebra

HTML

<div id="fadeIn1" style="display: none;">
    This is my hidden div 1
</div>
<div id="fadeIn2" style="display: none;">
    2
</div>
<div id="fadeIn3">
    3
</div>
<div id="fadeIn4">
    4
</div>

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

CSS

div {
    display: none;
}

JavaScript

var iter = 1;

function doFadeIn() {
    // If we just consumed the last one, could do something else,
    // like wire them together again for a repeat?
    if (iter > 4) {
        return;
    }
    
    var aDef = $.Deferred();
    aDef.done(doFadeIn);
    $("#fadeIn" + iter).fadeIn(4000, function() {
        // We've consumed this one, increment counter.
        iter++;
        aDef.resolve(); 
    });
};

function doEverything() {
    doFadeIn();       
};