JSFiddle - React, Tailwind, and code Playground

by twinturbotom

HTML

<button id='start'>animate</button>
<button id='reset'>Reset</button>
<button id='pause'>pause</button>
<div class='boxes'>
    <div class='box box1'></div>
    <div class='box box2'></div>
    <div class='box box3'></div>
    <div class='box box4'></div>
    <div class='box box5'></div>
    <div class='box box6'></div>
</div>

CSS

.boxes{position: relative}
.box{width: 40px; height: 40px; background-color: green; position:absolute;}
.box1{left: 0px;}
.box2{left: 60px;}
.box3{left: 120px;}
.box4{left: 180px;}
.box5{left: 240px;}
.box6{left: 300px;}

JavaScript

function a() {
    return $('.box1').animate({top: '100px'}, 1000, function(){
        $('.box1').animate({top: '50px'}, 1000);        
    });
    return $('.box6').animate({top: '200px'}, 4000);
}
function b(){
    return $('.box2').animate({top: '100px'}, 1000);
}
function c(){
    return $('.box3').animate({top: '100px'}, 1000, function(){
        $('.box3').animate({top: '50px'}, 1000);        
    });
}
function d(){
    return $('.box4').animate({top: '100px'}, 1000);
}
function e(){
    return $('.box5').animate({top: '100px'}, 1000, function(){
        $('.box5').animate({top: '50px'}, 1000);        
    });
}
function f(){
    return $('.box6').animate({top: '100px'}, 1000);
}
$('#start').click( function() {
// run b and wait one second, when done run c and wait 1 second, then run a
a().delay(100).promise().done( function(){
    b().delay(100).promise().done( function(){
        c().delay(100).promise().done( function(){
            d().delay(100).promise().done( function(){
                e().delay(100).promise().done( function(){
                    f().delay(100).promise().done( function(){
                        alert('all done!');
                    });
                });
            });
        });
    });
});

                
});
   
$('#reset').click( function() {
    $('.box').css({
        top: '0px'
    });
});
$('#pause').click( function() {
    $('div:animated').stop();
});