JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/lucianopanaro/jQuery-FxQueues/master/jquery.fxqueues-2.0.3.js"></script>
<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

var obj = $('#wrapper'),
    s = 400,
    p = 200;

function animation() {
    var o2 = $(".img2", obj),
        o3 = $(".img3", obj),
        o4 = $(".img4", obj);
    o2.animate({opacity: "1"}, {duration:s, queue: "global", postDelay:p});
    o3.animate({opacity: "1"}, {duration:s, queue: "global"});
    o2.animate({opacity: "0"}, {duration:0, queue: "global", postDelay:p});
    o4.animate({opacity: "1"}, {duration:s, queue: "global"});
    o3.animate({opacity: "0"}, {duration:0, queue: "global", postDelay:p});
    o4.animate({opacity: "0"}, {duration:s, queue: "global", postDelay:p, complete:animation});
}

$("#btn-start").click(function() {
    animation();   
});
$("#btn-stop").click(function() {
    $.fxqueue("global").stop();
    $(".fake-image", obj).fadeTo(800, 0);
});