How do I prevent a click to take action in JQuery before an animation ends?

I have this little problem regarding a function I'm trying to create with JQuery.

I have a menu that has 9 tabs and whenever the mouse gets over one of the tabs a menu will slide down (using the slideUp() and slideDown() in JQuery), and if the user clicks on one of the tab its menu will stay still and slide up when mouse is over.

My problem is, that whenever i click on a tab while its menu is still sliding down, the me开发者_如何学Pythonnu would stop extending to its original height. What i want is to know how to inactive the tabs and not do anything if clicked while the menus are still sliding down.

Thanks in advance

The jQuery selector :animated will leave only those elements which are currently being animated. Using this you could check to see if the parts of you tab systems which can be animated are do so at the time of a click event:

$tabs.click(function(e) {
    if ($tabs.is(':animated'))
        e.preventDefault();
});

You could create a boolean variable animating which is true when any part of your tab system is animating. Then check its value when a click is made.

Setting the Value

If several tabs can be animating at the same time you muse create an individual animating boolean for each, setting them to true when the animation starts and false in the callback. Here I have used an associative array:

animating['Tab1'] = true;
$tab1.animate({...}, 1000, function() {
    animating['Tab1'] = false;
});

Checking the Value

Then at any point in time you can evaluate whether any part of you tab system is animating by evaluating all individual booleans:

function isAnimating() {
    for (var tab in animating) {
        if (animating[tab])
            return true;
    }
    return false;
}

Disabling Clicks

Then bind a click event to your tab system and prevent the default action if the tab system is animation:

$tabs.click(function(e) {
    if (isAnimating) {
        e.preventDefault();
    }
});