如何防止JQuery排队(链接)

时间:2010-11-04 13:03:59

标签: jquery conditional jquery-animate

场景:您可以单击一个按钮,一些内容将向左移动(.animate)。 当你快速点击按钮约3次然后JQuery问题3。动画左边的顺序。

我不想要那个!我将阻止该排队,因此该按钮仅在动画完成时才起作用。 谢谢你们的每一个人!

伪代码:

IF #Content不是动画(静止不动)

然后点击按钮

Animate Contet CSS“left”+ 900px

ELSE 您无法立即点击该按钮。但是,如果您单击按钮,然后它就不会再动画另一个动画。

2 个答案:

答案 0 :(得分:4)

您可以使用the :animated selector根据元素的动画状态运行代码。

if( $('#Content').is(':not(:animated)') ) {
    // run your animation
}

这也使用the :not() selectorthe .is() method来返回布尔值。

或者你可以在动画开始时为按钮添加一个类,并使用该类作为标志来确定动画是否应该运行。

该课程还可以设置按钮的样式,以提供不应再次单击的反馈。

$('#myButton').click(function() {
    $button = $(this);
    if( !$button.hasClass( 'disabled' ) ) {
        $button.addClass( 'disabled' );
        $('#Content').animate({left: '+=900'}, function() { $button.removeClass('disabled') });
    }
});

答案 1 :(得分:2)

按下该click事件时,您始终可以unbind。然后将回调传递给animate,一旦动画完成,它将重新绑定click