jQuery disable enable click event with fade

Question

how can i disable click event before fadein and enable it after fadeout?

my js code:

$('a').click(function(){
    // disable click
    $('div').fadeOut(400,
        function(){
            $(this)
                .css('background','yellow')
            .fadeIn(1800, function(){}
             // enable click
             );});
});

i coulda use stop() but i need disable/enable plz modify my http://jsfiddle.net/WBWrM/1/ thx

Mitya · Accepted Answer · 2012-07-06 21:37:58Z

5

Add as the first line of your click callback:

if ($('div').is(':animated')) return;

answered Jul 6, 2012 at 21:37

Mitya

34.8k15 gold badges70 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

gen_Eric Over a year ago

+1, this works great. I think it's a better idea then what I had suggested.

test Over a year ago

Rocket - but your suggestion works perfect on my code this one keep doing fadein/out when i click multiple times

Mitya Over a year ago

@questionMonster - eh? It shouldn't, didn't for me when I tested in the Fiddle. Unless I'm missing something, there's really no difference in concept between what my and Rocket's solutions provide. Each just ignores any click that happens while the anim is rolling.

test Over a year ago

yea your answer is good it works perfect in single link, but when it multiple links fade doesnt stop after clicking few links fast. thanks tough!

Mitya Over a year ago

That's because your selector (div) is far too loose. I used the code you provided, not changing selectors. div should be replaced with a selector RELATIVE to the link clicked. What that is, depends on your code. Perhaps it's a sibling, for example.

gen_Eric · Accepted Answer · 2012-07-06 21:39:53Z

3

Add a class to the element, and don't run the event when that class is there.

$('a').click(function () {
    var $this = $(this);
    if ($this.hasClass('noClick')) return;
    // disable click
    $this.addClass('noClick');
    $('div').fadeOut(400, function () {
        $(this).css('background', 'yellow').fadeIn(1800, function () {
            // enable click
            $this.removeClass('noClick');
        });
    });
});

answered Jul 6, 2012 at 21:39

gen_Eric

228k42 gold badges304 silver badges343 bronze badges

Collectives™ on Stack Overflow

jQuery disable enable click event with fade

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related