使用jquery animate（）实现对文本的反弹效果？

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

我试图使用Jquery创建一个反弹效果，这是我到目前为止：

Html:

HTML：

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

Jquery:

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/

这里的工作示例：http：//jsfiddle.net/zLw8F/

3 个解决方案

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

要再次向上，你需要减少margin-top而不是动画margin-bottom：

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

Demo at jsfiddle.net

在jsfiddle.net上演示

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

然而，为了使与页面其余部分分离的元素动画，我建议相对定位而不是使用边距。