일시적으로 JQuery 토글을 허용하지 않음

Question

사용자가 링크를 선택할 때 토글 된 메뉴가 있습니다. 메뉴에 다른이 표시되고 숨김 애니메이션이 붙어 있고 이 생기고 싶을 때이 실행되는 동안 애니메이션이 실행되지 않도록하고 싶습니다. 다음 코드는 (사용자가 빠르게 두 번 링크를 클릭하면 즉, 다음 클릭이 동일한 동작을 트리거합니다) 작동하지만 링크가 빠르게 두 번 클릭하면 전환 의 상태를 뒤집 :

<a href="" id="button">Menu</a> 
<div id="menu">...</a> 

<script> 
$("#button").toggle(
    function (e) { 
     if $("#menu").is(":animated")) return false; 
     $("#menu").show("drop", {}, "slow"); 
    }, 
    function (e) { 
     if ("#menu").is(":animated")) return false; 
     $("#menu").hide("bounce", {}, "slow"); 
    } 
); 
</script> 

어떻게 전환 상태가 전환되지 않도록합니까?

감사합니다. 이 같은

Answer 1

사용 .click() 및 :not(), :animated 및 :visible 선택기를 사용하여 요소 내부의 click 핸들러의 상태를 확인 :

$("#button").click(function() { 
    var menu = $("#menu:not(:animated)"); 
    if(menu.is(":visible")) menu.hide("bounce", {}, "slow"); 
    else menu.show("drop", {}, "slow"); 
}); 

이 상태에 의존하지 않는, 조금 더 간단합니다 :)