JSFiddle - React, Tailwind, and code Playground

HTML

<div id="foo1">Foo 1</div>
<div id="foo2">Foo 2</div>
<div id="foo3">Foo 3</div>
<div id="foo4">Foo 4</div>
<div id="foo5">Foo 5</div>

CSS

div { padding: 10px }
#foo1 { background: green; }
#foo2 { background: red; }
#foo3 { background: yellow; }
#foo4 { background: blue; }
#foo5 { background: red; }

JavaScript

function anim1() {
  $("#foo1").fadeOut(5000 );
}
function anim2() {
  $("#foo2").fadeOut(5000);
}
function anim3() {
  $("#foo3").fadeout(5000);
}
function anim4() {
  $("#foo4").fadeout(3000);
}
function slideshow() {
  $("#foo5").fadeout(3000);
}

var animation = function () {
    setTimeout(function () {
        $.when($("#foo1").fadeOut(10000 )).done(function () {
            $.when($("#foo2").fadeOut(1000 )).done(function () {
                $.when($("#foo3").fadeOut(1000 )).done(function () {
                    $.when($("#foo4").fadeOut(7000 )).done(function () {
                        $.when($("#foo5").fadeOut(1000 )).done(function () {
                            animateCard(n);
                        });
                    });
                });
             });  
        });						
    }, 0);
}

animation();