JSFiddle - React, Tailwind, and code Playground

HTML

<div id="effect">
    <button type="button">Click</button>
    <div id="effect-a" class="effect">1</div>
    <div id="effect-b" class="effect">2</div>
</div>

CSS

.effect {position:absolute;top:50px;padding:30px;text-align:center;color:#fff}
#effect-a {left:20px;background:blue;color:#fff}
#effect-b {left:100px;background:red}

JavaScript

$(function(){
    $("button").click(function(){
        $(".effect").css("top",50);
        $(".effect").stop()
        
        $("#effect-a").filter(':not(:animated)').stop(true,true).delay(500).animate({top: "100px"},function(){
            
        $("#effect-b").filter(':not(:animated)').stop(true,true).delay(500).animate({top: "200px"});
        });
        
    });
});