JSFiddle - React, Tailwind, and code Playground

by chrisbenseler

HTML

<div class="tofade" data-timeout="5000">item 1</div>
<div class="tofade" data-timeout="5000">item 2</div>
<div class="tofade" data-timeout="4000">item 3</div>

CSS

.tofade {
    width: 100px;
    border: 1px solid #FF0000;
}

JavaScript

var destroy_item = function(el) {
    var dfd = new jQuery.Deferred();
    var t = el.getAttribute("data-timeout");
    console.log(t);

    $(el).fadeOut(t, function() {
        dfd.resolve();
    });
    
    return dfd.promise();
    
};


var items = document.querySelectorAll(".tofade");

var promises = [];

[].forEach.call(
    items, 
    function(el){
        promises.push(destroy_item(el))
    }
)

$.when.apply(null, promises)
.done(function() {
   console.log("x");
});