当这个动画准备好时再次运行动画

Run animation again when this animation is ready

本文关键字：动画 运行 准备好      更新时间：2023-09-26

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

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

当我点击一个按钮时，它就会这样做，并且运行良好。当我再次点击按钮时，动画仍在运行，它会将其添加到一个队列中，动画完成后，它会运行另一个时间。所以当我把这个按钮播放1秒的时候，它就会上下移动，上下移动等等。

我试过使用。stop和。查询函数，但我不能使它工作。

我只想运行动画，当我点击按钮，动画是'就绪'。

如果你不想打乱队列，你可以简单地添加一个像var animRunning = false;这样的标志，当你运行动画直到它结束时将其设置为true，然后将其设置回false。当然，如果标志已经为true，就不要运行动画了。

像这样:

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;
    });
})

你的答案是:stop()

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

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

你说你已经尝试过。stop()，它不起作用。问题是，你放对地方了吗?

试题:

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

相关文章：