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