JSFiddle - React, Tailwind, and code Playground

by adrienne

HTML

<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>

CSS

div{width:100px;height:100px;position:relative}
#one{background:red}
#two{background:pink}
#three{background:blue}
#four{background:orange}

JavaScript

$.when(
        $("#one").animate({left: 100}, 3000).promise(),
        $("#two").animate({left: 200}, 3000).promise()
    ).done(function() {
        $("#three").animate({left: 300}, 3000).promise()
        .done(function() {
            $("#four").animate({left: 400}, 3000).promise()
        })
    })