CODEWITHSUNDEEP
jquery
Lewis
Lewis

Reputation: 81

jQuery disable event listener until event finished

I have four tabs, one of them is active by default. When a non-active tab is clicked, it expands and the active one shrinks.

The problem I have is when a non-active tab is clicked during an animation.

http://jsfiddle.net/wFHBR/

$(document).ready(function(){
    $('.tab').bind('click',function(){
        if(!$(this).hasClass('activetab')){
            $('.activetab').removeClass('activetab',500);
            $(this).addClass('activetab',500);
        }
    });
});

I know animation stacking questions are asked all the time but I cant find a solution to this particular example.

I don't want an animation to be stopped, reversed or queued. I just want any clicks on any other tab to be completely ignored IF an animation is still going.

Many thanks!

Upvotes: 0

Views: 1604

Answers (1)

Serge Seredenko
Serge Seredenko

Reputation: 3541

Add a global variable to indicate whether you are in animation state right now. Set it to true in the beginning of click handler, back to false in one of animation methods callback. And check it to decide if you should go inside click handler or not. I edited you fiddle for an example http://jsfiddle.net/vSWdS/

 var currently = false;
$('.tab').bind('click',function(){
    if(!$(this).hasClass('activetab') && !currently){
        currently = true;
        $('.activetab').removeClass('activetab',500);
        $(this).addClass('activetab',500, "swing", function(){
            currently = false;
        });
    }
});

Upvotes: 3

Related Questions