简单但有问题的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() { }) 
     }) 
})