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

我试图使用jQuery来创建一个反弹的效果，这是我到目前为止有：使用jquery animate（）实现对文本的反弹效果？

HTML：

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

的Jquery：

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

其变为向下而不是向上，我试图搜索文档，但它不是

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

来源

2012-07-26 user1551482

嗨，只是想删除此链接：[jQuery.fx.interval]（http://api.jquery.com/jQuery.fx.interval/）。在删除其他问题之前，无法发布我的答案。也许你可以稍微调整一下。不过，我认为jQuery可以很好地优化动画（在可用的地方使用本地功能等）。尽量避免同时运行太多动画。 – Wolfram 2012-07-27 15:16:25

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

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

Demo at jsfiddle.net

然而，动画该元素从页面的其余部分分离，我建议相对位置而不是玩边际。

来源

2012-07-26 15:10:51 Bergi

谢谢你的作品:)） – user1551482 2012-07-26 15:13:40

试一下：

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

来源

2012-07-26 15:08:53 tekilatexee

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

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

jsFiddle example

来源

2012-07-26 15:09:45 j08691

谢谢，但我不想添加jQuery UI，:)）+1从我 – user1551482 2012-07-26 15:11:23

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

回答

相关问题