JSFiddle - React, Tailwind, and code Playground

by twinturbotom

HTML

<button id="btn-start">start</button>
<button id="btn-stop">stop</button>
<div id='wrapper'>
    <div class="img2 fake-image">&nbsp;</div>
    <div class="img3 fake-image">&nbsp;</div>
    <div class="img4 fake-image">&nbsp;</div>
</div>

CSS

.fake-image { width: 100px; height: 100px; margin: 10px; background-color: red; opacity:0;}

JavaScript

/* functions to emulate a global queue */
var Q = $({}); // empty object to store global queue 
var enQ = function(func) { Q.queue("global", func); } 
var deQ = function() { Q.dequeue("global"); }
var stopQ = function() { Q.clearQueue("global"); }
    
/* cache commonly used objs */
var obj = $('#wrapper');
var o2 = $(".img2", obj),
    o3 = $(".img3", obj),
    o4 = $(".img4", obj);

/* settings */
var s = 400,
    e = "linear",
    p = 200;

function animate() {

    enQ(function() {
        o2.animate({opacity: "1"}, s, e);
    });
    enQ(function() {
        o3.delay(p).animate({opacity: "1"}, s, e);
    });
    enQ(function() {
        o2.css("opacity", "0");
        o4.delay(p).animate({opacity: "1"}, s, e);
    });
    enQ(function() {
        o3.css("opacity", "0");
        o4.delay(p).animate({opacity: "0"}, s, e);
    });
    enQ(function() {
        o3.css("opacity", "0");
        o4.delay(p).animate({opacity: "0"}, s, e);
    });
    enQ(animate); // repeat when done
}
deQ();
$("#btn-start").click(animate);
$("#btn-stop").click(function() {
    stopQ();

});