JSFiddle - React, Tailwind, and code Playground

HTML

<div id="ball">ball</div>

CSS

#ball{
    top: 0px;
    left: 0px;
    position: relative;
}

JavaScript

$(document).ready(function(){

    $("#ball").queue( function() {

        $(this).animate({top:'+=50px'}, { duration: 500, queue: true });
        $(this).animate({top:'0px'}, { duration: 500, queue: true });
        $(this).animate({top:'+=50px'}, { duration: 500, queue: true });
        $(this).animate({top:'0px'}, { duration: 500, queue: true });
        $(this).animate({top:'+=50px'}, { duration: 500, queue: true });
        $(this).animate({top:'0px'}, { duration: 500, queue: true });
        $(this).animate({top:'+=50px'}, { duration: 500, queue: true });        
        $(this).animate( {left:'+=100px'}, { duration: 2500, queue: false });

        $.dequeue( this );
    });
    
});