JQuery : 여러 요소의 여러 트리거를 하나의 이벤트에 바인딩

Question

저는 인터넷을 통해이 문제에 대한 해결책을 찾으려고했지만, 여러 요소/이벤트/트리거에 약간의 변형이 있습니다. 문제.

상황에 따라 검색 입력의 가시성을 토글 한 검색 버튼이 있습니다. 버튼을 클릭하여 검색을 닫고 검색 입력 포커스가 흐리게 보이면 검색을 전환 할 수 있기를 원합니다.

내 현재 코드는 다음과 같습니다

function toggleSearch() { 
$("#search").animate({ 
     width: "toggle", 
     opacity: "toggle" 
    }, "slow",function() { $(this).focus(); }); 
$("#searchButton").parent('li').siblings().animate({ 
     width: "toggle", 
     opacity: "toggle" 
    }, "slow"); 
} 

$("#searchButton").click(toggleSearch); 
$("#search").blur(toggleSearch); 

여기서 문제는 검색이 다시 폐쇄 토글 버튼을 클릭하면, 그것은 또한 계산이다 그래서 흐리게 입력이 함수를 두 번 발사 및 검색이 종료로 및 재개한다. 그래서 기본적으로 나는이 작업을 수행 할 무언가가 필요합니다

$("#searchButton").click() or $("#search").blur() { 
    toggleSearch(); 
} 

나는 또한이 열려 토글 링에서 버튼의 기능을 변경하려면

이/검색 입력에 값이 있는지 여부에 따라 검색을 제출 폐쇄 . 하지만 이걸로 봤던 것에서는 사용할 구문을 잘 모르겠습니다. http://jsfiddle.net/hGgc9/

Answer 1

애니메이션 현재 사용에 의해 실행되고 있는지 확인할 수 있습니다 :

function toggleSearch() { 
    if (!$("#search").is(":animated")) { 
     $("#search").animate({ 
       width: "toggle", 
       opacity: "toggle" 
      }, "slow",function() { $(this).focus(); }); 
    } 
} 

$("#searchButton").parent('li').siblings().animate({ 
    width: "toggle", 
    opacity: "toggle" 
}, "slow"); 

$("#searchButton").click(toggleSearch); 
$("#search").blur(toggleSearch); 

http://jsfiddle.net/hGgc9/3/