如何防止 JQuery 排队（链接）

发布于 2024-09-30 23:56:57 字数 367 浏览 0 评论 0原文

场景：您可以单击一个按钮，一些内容将向左移动（.animate）。当您快速单击按钮约 3 次时，JQuery ques 3 .animate 将按顺序排列。

我不想那样！我将阻止这种排队，因此该按钮仅在动画完成时才起作用。谢谢你的每一个云！

伪代码：

IF #Content 不是动画（静止不动）

THEN On Click Button

Animate Contet CSS "left" + 900px

ELSE 您现在无法单击该按钮。但是如果你点击按钮，那么它就不会出现另一个动画。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

春风十里 2024-10-07 23:56:57

您可以使用 :animated 选择器来运行基于元素的动画状态。

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

这也使用 :not() 选择器，以及 .is() 方法返回布尔值。

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

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

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

You can use the :animated selector to run code based on the animated state of an element.

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

This also uses the :not() selector, and the .is() method to return a boolean.

Or you could add a class to the button when the animation starts, and use that class as a flag to determine if the animation should run.

The class could also style the button to give feedback that it shouldn't be clicked again.

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

回复收藏 0 原文