jQuery Bounce Effect on click no jQuery UI

jacktheripper picture jacktheripper · Apr 28, 2012 · Viewed 24.5k times · Source

I cannot find a solution to an animation to make a div bounce, using just jQuery animations. Something like does not work:

$("#bounce").click(function() {
    $(this).effect("bounce", {
        times: 3
    }, 300);
});.​

I would prefer not to use jQuery UI or any external plugin, such as the easing one. A wobble effect would be just as good in my case, so either will do.

Here is an example, any help would be much appreciated! Thanks in advance

Answer

Will Demaine picture Will Demaine · Apr 28, 2012

You could simply chain together some animate calls on the element like so:

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


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

Working example: http://jsfiddle.net/Willyham/AY5aL/