Question

我在下面制作了一个简单的Jquery动画：

$('#message').animate({
    height: "+=50px"
}, 1000).delay(1000).animate({
    height: "-=50px"
}, 1000);

当我点击一个按钮时，它确实完成了它并且运行良好。当动画仍在运行时再次单击该按钮时，它会将其添加到某种队列中，并在动画完成后再次运行。因此，当我按下按钮1秒钟时，它会上下，上下等等。

我尝试过使用.stop和.query函数，但我无法以某种方式使其工作。

我只想在单击按钮时运行动画并且动画已“准备好”。

Answer 1

如果您不想弄乱队列，可以简单地添加var animRunning = false;之类的标志，并在运行动画时将其设置为true，直到结束，然后将其设置为false。当然，如果标志已经为真，请不要运行动画。

这样的事情：

if (animRunning)
    return false;
animRunning = true;
$('#message').animate({
    height: "+=50px"
}, 1000, function(){ // using the complete callback instead of delay here
    animate({
        height: "-=50px"
    }, 1000, function(){
        animRunning = false;
    });
})

Answer 2

以下是您的回答：stop()

 $('#message').stop(true,true).animate({
    height: "+=50px"
 }, 1000).delay(1000).animate({
    height: "-=50px"
 }, 1000);

每次按下按钮时，清除动画队列并立即完成当前动画。

Answer 3

你说你尝试过.stop（）并且它不起作用。问题是，你把它放在了正确的地方吗？

尝试：

$('#message').stop().animate({
height: "+=50px"
}, 1000).delay(1000).animate({
    height: "-=50px"
}, 1000);

此动画准备就绪后再次运行动画

3 个答案: