Question

我一直在尝试使用jQuery，并遇到了一些我无法弄清楚的错误。任何帮助将不胜感激。

可以在下面找到简单的动画（带有jsfiddle的链接）。

单击按钮后，猪应该从左侧进入，向前移动（沿途完成几个旋转），然后淡出。乔治·科斯坦扎从左边进入并发出掌声。

不幸的是，乔治没有什么可以鼓掌的，因为猪的动作很可怕;它以我从未想过的方式来回跳过。与乔治的动作一样。此外，他似乎从来没有像我想的那样从页面上一路走下去。

顺便说一句，在我编写动画的计算机上（在jsfiddle中使用chrome），我没有遇到这个问题。然而，在我的笔记本电脑（镀铬）和朋友的笔记本电脑（野生动物园？）上，它是无可救药的错误。

关于我哪里出错的任何想法？提前致谢！

这是代码和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() {  })
        })
})

简单但有缺陷的jQuery动画

1 个答案: