使用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（）實現對文本的反彈效果？

回答

相關問題