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;
});