JSFiddle - React, Tailwind, and code Playground

by meatHucker

HTML

<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="block">5</div>
<div class="block">6</div>
<div class="block">7</div>

CSS

div {
    opacity: 0;
}

JavaScript

var mycallbackfunction = function() {
    alert('finished');
};

var $blocks = $('.block');
var promises = $blocks.map(function(i) {
    var dfd = $.Deferred();
    $(this).stop().delay(60 * i).animate({
        'opacity': 1
    }, {
        duration: 250,
        complete: dfd.resolve
    });
    return dfd.promise();
}).get();
$.when.apply(null, promises).then(mycallbackfunction);