JSFiddle - React, Tailwind, and code Playground

by LyndseyB

HTML

<div id="main_container">
    <div> div </div>
    <div> div </div>
    <div> div </div>
    <div> div </div>
    <div> div </div>
    <div> div </div>
    <div> div </div>
    <div> div </div>
</div>

CSS

#main_container {  position:relative; width:400px; height:200px; background:#eee; }
.moving-divs { position:absolute; background:green; margin-right:20px; }

JavaScript

$(function() {
var divs = $('#main_container').find('div').addClass('moving-divs');
var ids= '.moving-divs';
var allowed_width = $('#main_container').width() - $(ids).width();
var allowed_height = $('#main_container').height() - $(ids).height()
    $(ids).each(function(index) {
        $(this).delay(200*index)
        .animate({left: '+=' + allowed_width + 'px'})   
        .animate({top: '+=' + allowed_height + 'px'})   
        .animate({left: '-=' + allowed_width + 'px'})   
        .animate({top: '-=' + (allowed_height-$(ids).height()*index) + 'px'})   
    });
});