JSFiddle - React, Tailwind, and code Playground

by mgibsonbr

HTML

<div id="ball1">o</div>

CSS

#ball1 {
    position: absolute;
}

JavaScript

function fast() {
    fastLeft();
    fastTop();
}

// Run only once; calls fast on end
$("#ball1").animate ({top:"100px"}, {duration:6000, queue:false, complete:function() {
    $("#ball1").animate ({top:"0px" }, {duration:6000, queue:false} );
}});
    
$("#ball1").animate ({left:"100px" }, {duration:9000, queue:false, complete:function() {
    $("#ball1").animate ({left:"0px" }, {duration:9000, queue:false, complete:fast} );
}});
        
// Same, but fast; calls itself on end
function fastLeft() {
    $("#ball1").animate ({left:"100px" }, {duration:913, queue:false, complete:function() {
        $("#ball1").animate ({left:"0px" }, {duration:887, queue:false, complete:fastLeft} );
    }});
}
    
function fastTop() {
    $("#ball1").animate ({top:"100px"}, {duration:668, queue:false, complete:function() {
        $("#ball1").animate ({top:"0px" }, {duration:565, queue:false, complete:fastTop} );
    }});
}