我在下面制作了一个简单的Jquery动画:
$('#message').animate({
height: "+=50px"
}, 1000).delay(1000).animate({
height: "-=50px"
}, 1000);
当我点击一个按钮时,它确实完成了它并且运行良好。 当动画仍在运行时再次单击该按钮时,它会将其添加到某种队列中,并在动画完成后再次运行。 因此,当我按下按钮1秒钟时,它会上下,上下等等。
我尝试过使用.stop和.query函数,但我无法以某种方式使其工作。
我只想在单击按钮时运行动画并且动画已“准备好”。
答案 0 :(得分: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;
});
})
答案 1 :(得分:0)
以下是您的回答:stop()
$('#message').stop(true,true).animate({
height: "+=50px"
}, 1000).delay(1000).animate({
height: "-=50px"
}, 1000);
每次按下按钮时,清除动画队列并立即完成当前动画。
答案 2 :(得分:0)
你说你尝试过.stop()并且它不起作用。问题是,你把它放在了正确的地方吗?
尝试:
$('#message').stop().animate({
height: "+=50px"
}, 1000).delay(1000).animate({
height: "-=50px"
}, 1000);