使用jquery animate()实现对文本的反弹效果？

Question

我正在尝试使用Jquery来创建一个弹跳效果,这是我到目前为止所拥有的:

HTML:

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

jQuery的:

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

它向下但不向上,我尝试搜索文档,但事实并非如此

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

Answer 1

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

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

在jsfiddle.net上演示

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

Answer 2

为什么不直接使用jQuery UI 效果？前任：

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

jsFiddle 示例