0

我一直在自己试验 jQuery，但遇到了一些我无法弄清楚的错误。任何帮助将不胜感激。

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

单击按钮后，猪应该从左侧进入，向前移动（沿途完成几个旋转），然后淡出。George Costanza 从左边进入并给予掌声。

不幸的是，乔治没有什么可以鼓掌的，因为猪的动作非常糟糕。它以我从未想过的方式来回跳跃。乔治的动作也是如此。此外，他似乎从来没有像我打算的那样在最后完全离开页面。

顺便说一句，我在编写动画的计算机上对此没有任何问题（在 jsfiddle 中使用 chrome）。然而，在我的笔记本电脑（chrome）和朋友的笔记本电脑（safari？）上，它是无可救药的错误。

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

这是 jsfiddle 的代码和链接：jsfiddle.net/corduroy_joy/v69st/

$(文档).ready(函数() {
    $('#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 动画！

4

1 回答 1

0

您应该使用animate方法的回调函数，否则在一个动画完成之前执行另一个动画。

$('#button').click(function(){
    $('#pig').animate({left:'+=200px'}, 1000, function(){
        $(this).animate(..., function(){
             $(this).animate(..., function() {  })
        })
})
于 2013-02-22T22:09:58.803 回答