javascript - 使用 jquery animate() 在文本上实现反弹效果？

Question

我正在尝试使用 Jquery 来创建反弹效果，这就是我目前所拥有的：

html:

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

查询：

$("#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

Why not just use the jQuery UI effects? Ex:

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

jsFiddle example

Answer 3

Try that:

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