簡單但有問題的jQuery動畫

Question

我一直在試用jQuery，並遇到一些我無法弄清楚的bug。任何幫助將不勝感激。

簡單的動畫可以在下面找到（帶有jsfiddle的鏈接）。

點擊按鈕後，豬應該從左邊進入，向前移動（沿路完成幾個圓弧），然後淡出。喬治科斯坦扎從左邊進入，並給了他掌聲。

不幸的是，喬治沒有什麼可以鼓掌的，因爲豬的動作非常可怕;它以我從未打算過的方式來回跳動。喬治的運動也是如此。而且，他似乎從來沒有像我打算的那樣一路走到最後一頁。

順便說一下，我沒有在計算機上編寫動畫（在jsfiddle中使用chrome）的問題。然而，在我的筆記本電腦（鍍鉻）以及朋友的筆記本電腦上（safari？），這是無可救藥的錯誤。

對我要去哪裏錯的任何想法？提前致謝！

下面的代碼和一個的jsfiddle鏈接：jsfiddle.net/corduroy_joy/v69st/

 

$(document).ready(function() { 
    $('#button').click(function(){ 
     $('#pig').animate({left:'+=200px'}, 1000).animate({top:'+=10px'}, 100).animate({left:'+=10px'}, 100).animate({bottom:'+=12px'}, 100).animate({left:'+=100px'}, 690, 'linear').animate({bottom:'+=15px'}, 100).animate({left:'+=130px'}, 590, 'linear').animate({top:'+=10px'}, 100).animate({left:'+=10px'}, 100).animate({bottom:'+=12px'}, 100).animate({left:'+=100px'}, 690, 'linear').animate({top:'-=15px'}, 100).animate({left:'+=130px'}, 590, 'linear').animate({top:'+=10px'}, 100).animate({left:'+=10px'}, 100).animate({bottom:'+=12px'}, 100).animate({left:'+=100px'}, 690, 'linear').animate({top:'-=12px'}, 100).animate({left:'+=100px'}, 690, 'linear').animate({bottom:'+=15px'}, 100).animate({left:'+=130px'}, 590, 'linear').animate({bottom:'+=15px'}, 100).animate({left:'+=130px'}, 590, 'linear').fadeTo('slow', 0).animate({left:'+=200px'}, 1000, function() {$('#pig').removeAttr('style');                                                                                                                                                                                                                               }); 

$('#george').animate({left:'-=1px'}, 7000).animate({left:'+=280px'}, 1500).delay(1400).animate({left:'-=281px'}, 3500); 
}); 
}); 

更新：哎，沒什麼事我已經試過了無數的似乎工作。我放棄了jQuery動畫！

Answer 1

您應該使用animate方法的回調函數，否則在動畫完成之前執行另一個動畫。

$('#button').click(function(){ 
    $('#pig').animate({left:'+=200px'}, 1000, function(){ 
     $(this).animate(..., function(){ 
      $(this).animate(..., function() { }) 
     }) 
})