使用jquery animate(）在文本上实现反弹效果

Achieving a bounce effect on text using jquery animate()?

本文关键字：实现 文本 animate jquery 使用      更新时间：2024-02-25

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

Html:

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

Jquery：

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

它向下但不向上，我试着搜索文档，但它没有

此处的工作示例：http://jsfiddle.net/zLw8F/

要再次向上移动，需要减少margin-top而不是设置margin-bottom:的动画

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

jsfiddle.net 演示

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

为什么不直接使用jQuery UI效果？例如：

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

jsFiddle示例

试试看：

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