JSFiddle - React, Tailwind, and code Playground

by ReinRaus

HTML

<div id="block1" class="block"></div>
 <div id="block2" class="block"></div>
 <div id="block3" class="block"></div>

CSS

body{
    background: silver;
}
div.block {
    position: absolute;
    width:100px;
    height:60px;
    margin:-1px;
}
#block1 {
    top: 50px;
    left: 50px;
    background: red;
}
#block2 {
    top: 350px;
    left: 450px;
    background: blue;
}
#block3 {
    top: 150px;
    left: 250px;
    background: white;
}

JavaScript

$("#block2").animate(
        {
            left: $("#block3").css("left"),
            top: parseInt($("#block3").css("top"))+parseInt($("#block3").css("height"))+'px'
        },
        2000,
        'swing'
     );
    $("#block1").animate(
        {
            left: $("#block3").css("left"),
            top: parseInt($("#block3").css("top"))+parseInt($("#block3").css("height"))+parseInt($("#block2").css("height"))+'px'
        },
        2200,
        'swing'
    );