jQuery：我需要一個反垃圾郵件在我的功能

Question

我有一個功能，顯示一個div在我的導航欄點擊時，你可以切換它，所以當你再次按下時隱藏。

問題是，你可以垃圾點擊它，所以動畫繼續並打破div。

我需要的是某種反垃圾郵件點擊，我希望它等到第一個動畫完成。

下面是代碼：

$("#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 /解決方案

這是我做過什麼： 注：這將是與本網站使用的顏色更好，看到的變化。

$("#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

你可以有一個回調函數，當動畫完成：

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