使用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 );

Demo at jsfiddle.net

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

Answer 2

为什么不使用jQuery UI effects？例如：

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

<强> jsFiddle example

Answer 3

试试：

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