JSFiddle - React, Tailwind, and code Playground

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

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

function animateit(play) {
    if (play == false) {
        $(".img2", obj).stop(true, true).fadeTo('800', 0);
        $(".img3", obj).stop(true, true).fadeTo('800', 0);
        $(".img4", obj).stop(true, true).fadeTo('800', 0);
    }
    if (play == true) {
        $(".img2", obj).animate({
            opacity: "1"
        }, s, e, function() {
            $(".img3", obj).delay(p).animate({
                opacity: "1"
            }, s, e, function() {
                $(".img2").css({
                    opacity: "0"
                });

                $(".img4", obj).delay(p).animate({
                    opacity: "1"
                }, s, e, function() {
                    $(".img3").css({
                        opacity: "0"
                    });
                    $(".img4", obj).delay(p).animate({
                        opacity: "0"
                    }, s, e, function() {
                        $(".img4", obj).delay(p).animate({
                            opacity: "0"
                        }, s, e, function() {
                            if (play == true) animateit(true);
                        });

                    });
                });
            });
        });
    }
}


$("#btn-start").click(function() {
    animateit(true);
});
$("#btn-stop").click(function() {
    animateit(false);
});