JSFiddle - React, Tailwind, and code Playground

by mowglisanu

HTML

<div id="container"><div id="d1"></div><div id="d2"></div><div id="d3"></div><div id="d4"></div><div id="d5"></div></div>

CSS

#container{
    width:300px;
    height:300px;
    position: relative;
}
#container div{
    width: 100px;
    height: 100px;
    position: absolute;
}
#d1{
    background-color: red;
}
#d2{
    background-color: green;
    left:200px;
}
#d3{
    background-color: blue;
    top: 200px;
    left: 200px;
}
#d4{
    background-color: cyan;
    top: 200px;
}
#d5{
    background-color: magenta;
    top: 100px;
    left: 100px;
}

JavaScript

$(function(){
    $("#container div").on('animate', rotate);
    function rotate(e){
        if (this.offsetTop == 0){
            if (this.offsetLeft == 200){
                $(this).animate({top: 100}, 'slow', 'linear', trigger);
            }
            else{
                $(this).animate({left: this.offsetLeft+100}, 'slow', 'linear', trigger);
            }
        }
        else if (this.offsetTop == 100){
            if (this.offsetLeft == 0){
                $(this).animate({top: 0}, 'slow', 'linear', trigger);
            }
            else{
                $(this).animate({top: 200}, 'slow', 'linear', trigger);
            }
        }
        else if (this.offsetTop == 200){
            if (this.offsetLeft == 0){
                $(this).animate({top: 100}, 'slow', 'linear', trigger);
            }
            else{
                $(this).animate({left: this.offsetLeft-100}, 'slow', 'linear', trigger);
            }
        }
    }
    function trigger(){
        $(this).trigger('animate');
    } 
    $('#d1,#d2,#d3,#d4').trigger('animate');    
});