防止动画进行过程中多次单击(stopPropagation&:animated) [英] Prevent multiple clicks while animation is ongoing (stopPropagation & :animated)

问题描述

阅读并遵循以下答案后，我要提问.

I am asking after reading and following these answers.

jQuery会阻止多次点击，直到动画完成为止
如何防止单击队列的建立，在jquery中使用切换?尝试使用bind/unbind('click')

尽管具有e.stopPropagation();和if ($element.is(':animated')){return false;}的快速单击气泡.

Despite having e.stopPropagation(); and if ($element.is(':animated')){return false;} in place fast clicks bubble.

这里是我的小提琴.缓慢的点击可以正常工作，快速的点击会使它失败.请问我做错了什么?菜单项处于动画状态时，如何丢弃所有快速单击?

Here is my fiddle. Slow clicks work fine, fast clicks make it fail. What am I doing wrong please? How can I discard all fast clicks while the menu items are animated?

推荐答案

您的代码是可靠的，但是，您在检查动画之前添加了该类.

Your code was solid, however, you were adding the class BEFORE checking for animation.

我只是简单地将动画检查上移，并阻止了点击甚至更改类.

I simply moved your animation check up, and prevented the click from even changing the class.

// jQuery 1.11.0 on DOM ready

var $hamburgerMenuButton = $('#burgerButton');
var $navTitle = $('.navigation-item');
var $score = $('.score');

$hamburgerMenuButton.click(function(e) {

e.stopPropagation();

    if ( !$hamburgerMenuButton.hasClass('open')) {          

        console.log('hamburgerMenuButton does NOT have class open');
        if ( $navTitle.is(':animated') ) {
        $score.append('<br>animating ');  
                return false;
            }
        $hamburgerMenuButton.addClass('open');
        console.log('class open ADDED to hamburgerMenuButton');
      $score.append('<br>class open ADDED ');


            var delay = 0;
            $navTitle.each(function(){
                $(this).delay(delay).animate({
                    'margin-left':'0px'
                },500,'easeOutQuint'); 
                delay += 33;
            }); // animation end

      $score.append('<br>clicked ');

    } // if end 

    else {

        console.log('hamburgerMenuButton does HAVE class open');
            if ( $navTitle.is(':animated') ) {
        $score.append('<br>animating ');  
                return false;
            }
        $hamburgerMenuButton.removeClass('open');
        console.log('class open REMOVED from hamburgerMenuButton');
      $score.append('<br>class open REMOVED ');



            var delay = 0;
            $navTitle.each(function(){
                $(this).delay(delay).animate({
                    'margin-left':'10em'
                },500,'easeOutQuint'); 
                delay += 33;
            }); // animation end                

      $score.append('<br>clicked again');

    } // else end               
}); // $hamburgerMenuButton click end

https://jsfiddle.net/gregborbonus/b2tw65hf/3/

这篇关于防止动画进行过程中多次单击(stopPropagation&:animated)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！