JSFiddle - React, Tailwind, and code Playground

by Moslem Hady

HTML

<div id="bounce"></div>

CSS

#bounce {
    height: 100px;
    width: 100px;
    background-color: red;
    margin-top: 50px;
}

JavaScript

$("#bounce").click(function() {
    doBounce($(this), 3, '10px', 300);   
});


function doBounce(element, times, distance, speed) {
    for(i = 0; i < times; i++) {
        element.animate({marginTop: '-='+distance},speed)
            .animate({marginTop: '+='+distance},speed);
    }        
}