JQuery Bounce effect on click without jQuery UI

Question

I can't find an animation solution to roll back a div using only jQuery animations. Something seems to not work:

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

I would prefer not to use jQuery UI or any external plugin, for example, to make it easier. The wobble effect would be just as good in my case as it would be.

Here is an example, any help would be greatly appreciated! thanks in advance

Answer 1

You can simply bind some animate calls to an element as follows:

 $("#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/

Answer 2

Use this function for fading bounces. Remember to give the element a unique class a rebound if you use the code unchanged.

 var getAttention = function(elementClass,initialDistance, times, damping) { for(var i=1; i<=times; i++){ var an = Math.pow(-1,i)*initialDistance/(i*damping); $('.'+elementClass).animate({'top':an},100); } $('.'+elementClass).animate({'top':0},100); } $( "#bounce").click(function() { getAttention("bounce", 50, 10, 1.2); }); 

 #bounce { height:50px; width:50px; background:#f00; margin-top:50px; position:relative; border-radius: 50px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="bounce" class="bounce"></div> 

Answer 3

For a vertical bounce, you can try something like this:

 function bounce(element, distance, speed){ var bounce_margin_top = $(element).css("margin-top") $(element).css("margin-top", "-="+distance) $(element).show().fadeIn(200).animate({ "margin-top": bounce_margin_top }, { duration: speed, easing: "easeOutBounce" }) } 

Answer 4

I usually use jQuery animations. For your specific question, it might look like this:

HTML:

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

CSS:

 #bounce { height:50px; width:50px; background:#333; margin-top:50px; position:relative; } 

And finally jQuery:

 $( "#bounce" ).click(function() { for (var i=1; i<=3; i++) { $(this).animate({top: 30},"slow"); $(this).animate({top: 0},"slow"); } }); 

And here is the working fiddle: http://jsfiddle.net/5xz29fet/1/