Question

我在阅读并遵循这些答案后会问。

jQuery prevent multiple clicks until animation is done
how to prevent click queue build up, using toggle in jquery? tried using bind/unbind('click')

尽管有e.stopPropagation();和if ($element.is(':animated')){return false;}快速点击泡沫。

Here是我的小提琴。慢点击工作正常，快速点击使其失败。我做错了什么？如何在菜单项动画时丢弃所有快速点击？

Answer 1

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

我只是简单地移动了你的动画，并阻止了点击甚至更改了课程。

// 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＆amp;：animated）

1 个答案: