動畫完成後，JQuery動畫效果「跳動」？

我一直在這裏尋找答案，谷歌等，並且似乎無法完全明白這一點。動畫完成後，JQuery動畫效果「跳動」？

我有一個ID爲＃pin01的圖像。這是地圖上的一個圖釘，我在一個div內進行了動畫製作，登陸地圖圖像（認爲Google地圖）。

我JQuery的，其工作好了，是這樣的：

$('#pin01').animate({ opacity: 0}, 0).delay(500); 
$('#pin01').animate({ opacity: 1, top: "305px" }, 500);

和我的HTML如下：

<img src="images/pin_blue.png" id="pin01" />

動畫的偉大工程，以及銷淡入，並滴上到地圖就好了。我想要的是，它在距離div頂部305px的位置後反彈，因此當它位於地圖上時，它會在最後反彈一點。我想我會用這個效果：

$('#pin01').effect("bounce", { direction:'down', times:5 }, 300);

我想通了最終代碼會去是這樣的：

$('#pin01').animate({ opacity: 0}, 0).delay(500); 
$('#pin01').animate({ opacity: 1, top: "305px" }, 500); 
$('#pin01').effect("bounce", { direction:'down', times:5 }, 300);

，結果在一個反彈，但返回到原始的起始位置該針，不保留305px的運動。我試圖放置一個頂部：效果，這是行不通的。

我試過結合，嵌套這些等，沒有什麼似乎工作。

如果有人有任何其他的想法，好奇看看如何得到這個功能正常。我認爲這是一個簡單的調整，似乎無法弄清楚。

SOLUTION

刪除：

$('#pin01').show().animate({ top: 305 }, {duration: 1000, easing: 'easeOutBounce'});

解決反彈問題，一旦上：

$('#pin01').animate({ opacity: 0}, 0).delay(1000); 
$('#pin01').animate({ opacity: 1, top: "350px" }, 500);

從下面的答案一行替換兩個地圖。

在某些褪色功能添加，我寫如下：

$('#pin01').animate({ opacity: '0' }); $('#pin01').delay(500).show().animate({ top: 305, opacity: '1' }, {duration: 1000, easing: 'easeOutBounce'});

有可能是做褪色更清潔的方式，但這個工作對我的例子。

來源

2012-04-20 stebesplace

嘗試用：

$('#pin01').show().animate({ top: 305 }, {duration: 1000, easing: 'easeOutBounce'});

來源

2012-04-20 17:56:00

現在測試這個... – stebesplace 2012-04-20 17:57:04

引腳下降，落在右側空間，然後向下跳過幾百像素（可能是原始的305像素）並彈起，然後將自己放回到着陸位置。所以這裏有85％，只是不確定爲什麼它考慮到另一次跳躍？ – stebesplace 2012-04-20 17:59:28

我已經安裝了一個演示頁面，上面有一個鏈接，看看發生了什麼。 – stebesplace 2012-04-20 18:06:36

您可以在動畫功能使用marginTop，而不是top。

來源

2012-04-20 18:18:27 r0m4n

動畫完成後，JQuery動畫效果「跳動」？

回答

相關問題