javascriptjqueryhtmlanimationbounce

jQuery Bounce Effect on click no jQuery UI

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

Solution

  • 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/