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

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

• javascript
• jquery

• Hi, just wanted to drop this link: jQuery.fx.interval. Could not post my answer before you deleted your other question. Maybe you can tweak it a little. However, I think jQuery optimizes the animations quite well (using native features where available etc.). Try to avoid running too many animations at the same time. – Wolfram Commented Jul 27, 2012 at 15:16

3 Answers 3

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

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

Why not just use the jQuery UI effects? Ex:

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

jsFiddle example

Try that:

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