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.