Using jQuery, how do I disable the click effect on the current tab?

Question

I have a menu with an animation going on, but I want to disable the click while the animation is happening.

<div></div>
<div></div>
<div></div>

$("div").click(function() { 
  $(this).animate({height: "200px"}, 2000); 
  return false;
});

However, I want to disable all the buttons while the event is happening, AND disable the div that was clicked.

I was thinking of adding a class to the div that's clicked and putting the click only on the divs without that class:

$("div").not("clicked").click(function() { 
  $(this).animate({height: "200px"}, 2000).addClass("clicked"); 
  return false;
});

But this doesn't appear to work (I think it does logically)?

Any help appreciated.

Cheers,
Steve

Answer 1

$("div").click(function() {
    if (!$(this).parent().children().is(':animated')) {
        $(this).animate({height: "200px"}, 2000); 
    }
    return false;
});

Answer 2

You could do something like this...

$(function() {          
    $("div").click(function() {                 

        //check to see if any of the divs are animating
        if ($("div").is(":animated")) { 
            alert("busy"); 
            return; 
        }

        //whatever your animation is        
        var div = $(this);
        div.slideUp(3000, function(){ div.slideDown(1000); });

    });

});

This will animate the click so long as any div is not currently animating. I'm most likely put all those divs in a container and not just simply refer to div, since it could affect a lot more on the page than just your menu,

Answer 3

Thanks MizardX,

That works fine. Do you know a way of disabling the div that was clicked also?

Cheers,
Steve

Answer 4

How do I leave the clicked <div> disabled after the animation's occurred? I've added a class to the div that's been clicked, but doing the following doesn't appear to work:

<div></div>
<div class="active"></div>
<div></div>

$("div").not('active').click(function() {
  if (!$(this).parent().children().is(':animated')) {
    $(this).animate({height: "200px"}, 2000); 
  }
  return false;
});

I suspect I'm missing something with regard to the way .not works