0

I am asking after reading and following these answers.

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

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?

lowtechsun
  • 1,915
  • 5
  • 27
  • 55
  • [Corrected fiddle](https://jsfiddle.net/b2tw65hf/4/) with [answer](http://stackoverflow.com/a/36392062/1010918). – lowtechsun Apr 03 '16 at 22:50

1 Answers1

1

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/

Greg Borbonus
  • 1,384
  • 8
  • 16
  • Out of curiosity, would you suggest a lib like velocity to smooth out the sliding effect even more? Want this compatible down to IE8 otherwise I would be using CSS. Any suggestions? Not quite satisfied despite using the $easing plugin as well. Trying to get close to [this](http://tympanus.net/Tutorials/AnimatedMenuIcon/) level of smoothness or similar. Thank you for your answer. – lowtechsun Apr 03 '16 at 22:53
  • To be 100% honest with you, I think swing animation looks great https://jsfiddle.net/gregborbonus/b2tw65hf/5/ – Greg Borbonus Apr 04 '16 at 00:18