JSFiddle - React, Tailwind, and code Playground

by jmansa

HTML

<button>Try it</button>

<div class='left'></div>
<div class='center'></div>
<div class='right'></div>

CSS

div.left {
    background: red;
    width: 100px;
    height: 25px;
    position: absolute;
    top: 25px; left: -100px;
}

div.center {
    background: red;
    width: 100px;
    height: 25px;
    position: absolute;
    top: 75px; left: -100px;
}

div.right {
    background: red;
    width: 100px;
    height: 25px;
    position: absolute;
    top: 125px; left: -100px;
}

JavaScript

$('button').click(function(){
    $('button').attr("disabled", true);
    $('div.left').css({top: "25px", left: "-100px"});
    $('div.center').css({top: "75px", left: "-100px"});
    $('div.right').css({top: "125px", left: "-100px"});
    
    $('div.left').delay( 0 ).animate({top: 25, left: "320px"}, 300, "easeOutCubic", function(){
        $('div.left').animate({top: 25, left: "300px"}, 300, "easeOutCubic");
    });
    
    $('div.center').delay( 100 ).animate({top: 75, left: 320}, 300, "easeOutCubic", function(){
        $('div.center').animate({top: 75, left: 300}, 300, "easeOutCubic");
    });
    
    $('div.right').delay( 200 ).animate({top: 125, left: 320}, 300, "easeOutCubic", function(){
        $('div.right').animate({top: 125, left: 300}, 300, "easeOutCubic",  function(){ // make sure animation is done before button is active //
            $('button').attr("disabled", false);
        });
        
        
    });
    
});