Achieving a bounce effect on text using jquery animate()?

Question

I am trying to use Jquery to create a bounce effect, this is what i have so far:

Html:

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

Jquery:

$("#animation").animate({ marginTop: "80px" }, 1500 )
               .animate({ marginBottom: "40px" }, 800 );

Its goes downwards but not upwards, i tried searching the documentation, but it doesn't

working example here: http://jsfiddle.net/zLw8F/

Answer 1

To go upwards again, you'd need to reduce the margin-top instead of animating margin-bottom :

$("#animation").animate({ marginTop: "80px" }, 1500 )
               .animate({ marginTop: "40px" }, 800 );

Demo at jsfiddle.net

Yet, to animate the element decoupled from the rest of the page, I recommend relative positioning instead of playing with margins.

Answer 2

Why not just use the jQuery UI effects ? Ex:

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

jsFiddle example

Answer 3

Try that:

$("#animation").animate({ marginTop: "80px" }, 1500, function() {
  $(this).animate({ marginTop: "40px" }, 800 );
});