jQuery: I need an antispam on my function

Question

I have a function which reveals a div in my nav when clicked, and you can toggle it, so it hides when you press it again.

The problem is, that you can spamclick it so the animation keeps going and breaks the div.

What I need is some kind of antispam click, I want it to wait until the first animation is done.

Here is the code:

$("#navDown").click(function(){
if($("#navExpand").height()===0){
    $('#navArrow').animateRotate(0, -180);
    $("#navExpand").animate({
        height: 150
    })
    $(".navExCon").delay(300).fadeToggle(150);
    }
else if($("#navExpand").height()===150)
    {
$(".navExCon").fadeToggle(150);
    $('#navArrow').animateRotate(180, 0);
    $("#navExpand").delay(300).animate({
        height: 0
    });
    };

});

UPDATE /solution

This is what I did: note: it would be better with the use of color on this site, to see the changes.

$("#navDown").click("slow",function(){ // added time "slow": 600 u i think.
  if($("#navExpand").height()===0){
    $('#navArrow').animateRotate(0, -180);
    $("#navExpand").animate({
        height: 150
    },200)                    // added some time
    $(".navExCon").fadeToggle(100);
    }
    else if($("#navExpand").height()===150)
    {
    $(".navExCon").fadeToggle(250);
    $('#navArrow').animateRotate(180, 0);
    $("#navExpand").animate({
        height: 0
    },200);                  // added some time
    };
});

Answer 1

You can have a callback function when animation is finished:

var animating = false;
$("#navDown").click(function(){
    if (animating) {
        return; // Don't start new animation
    }
    animating = true;

    if($("#navExpand").height()===0){
        $('#navArrow').animateRotate(0, -180);
        $("#navExpand").animate({
            height: 150
        })
        $(".navExCon").delay(300).fadeToggle(150, function() {
            // Will be called after animation is finished
            animating = false;
        });
    }
    else if($("#navExpand").height()===150)
    {
        $(".navExCon").fadeToggle(150);
        $('#navArrow').animateRotate(180, 0);
        $("#navExpand").delay(300).animate({
            height: 0
        }, function() {
            // Will be called after animation is finished
            animating = false;
        });
    }
});