JSFiddle - React, Tailwind, and code Playground

HTML

<div class="first"></div>
<div class="second"></div>
<div class="third"></div>

CSS

div{
    position: absolute;
    
    width: 200px;
    height: 100px;
}

.first {
    left: 0;
    top: 0;
    background: yellow;
    
}

.second {
    left: 100px;
    top: 25px;
    background: green;
    
}

.third {
    left: 200px;
    top: 50px;
    
    background: blue;
}

p.msg {
    position: absolute;
    left: 100px;
    top: 200px;
    font-size: 30px;
    color: red;
    font-family : verdana;
}

JavaScript

function queueFadeIn(div, promise) {
    return promise.pipe(function() {
        return $(div).fadeIn();
    });
}

$(function() {

    var dfr = $.Deferred();
    // just chaining...
    var promise = dfr.pipe(function() {
        return $('.first').fadeOut('slow');
    }).pipe(function() {
        // without return, run simultaneously...
        $('.second').fadeOut('slow');
    }).pipe(function() {
        return $('.third').fadeOut('slow');
    });

    var divs = ['.third', '.second', '.first'];
    for (var i = 0; i < divs.length; i++) {
        promise = queueFadeIn(divs[i], promise);
    }

    // manual chaining
    promise.pipe(function() {
        $('body').append('<p class="msg">Completed</p>');
    });

    dfr.resolve()
});