jQuery에서 이전 이벤트가 완료되기 전에 다른 이벤트가 실행되지 않도록 하시겠습니까?

Question

http://jsfiddle.net/jmPCt/18/

저는 JS와 jQuery에 대해 매우 익숙합니다. 위의 링크에 모든 코드를 직접 작성했습니다. 그것은 작동하고 내가 원하는 것은 한 가지만을 위해 저축합니다. '다음'링크를 빠르게 클릭하면 표시 할 다음 컨테이너의 깜박임이 표시되거나 빠르게 클릭하면 코드에 두 개의 컨테이너가 표시되지만 한 번에 하나만 표시되도록 할 수 있습니다. jQuery에서이를 처리 할 수있는 방법이 있습니까? 여기에 설명 된 바와 같이 정지를 사용하여 시도했다 : How to prevent jquery hover event from firing when not complete? 그러나이 문제를 해결할 수 없습니다.

Answer 1

찾고 계시는 분은 .stop()입니다. 그것은 원하는 동작으로 구현 변경입니다하지만 문서는 당신을 위해 정리한다 : 여기

http://api.jquery.com/stop 데모입니다 : 때문에 어떻게 .stop() 작품의 http://jsfiddle.net/jmPCt/19/

, 당신은 chop- 수 .fadeOut().fadeIn()와 함께 사용하거나 애니메이션이 더 이상 작동하지 않는 시점까지 내가 찾은 가장 좋은 수정은 항상 .fadeTo()와 절대 값에 애니메이션을하는 것입니다 : 여기

http://api.jquery.com/fadeTo은 내가 당신의 JSFiddle에 추가하는 코드를,이 .fadeTo() 및 .stop()를 사용하는 사람과 기본을 .fadeIn() 및 .fadeOut() jQuery를 기능을 덮어 :

$.fn.fadeOut = function (duration, callback) { 
    $(this).stop().fadeTo(duration, 0, function() { 
     $(this).css('display', 'none'); 
     if (typeof callback == 'function') { 
      callback(); 
     } 
    }); 
}; 
$.fn.fadeIn = function (duration, callback) { 
    $(this).css('display', 'block').stop().fadeTo(duration, 1, function() { 
     if (typeof callback == 'function') { 
      callback(); 
     } 
    }); 
}; 

업데이트

그런 다음 그들은 jumpiness를 제거합니다 서로의 상단에 애니메이션을 적용 할 수있는 "슬라이드"요소에 대한 position 속성을 설정하면

코드의 exhibi TS :

HTML -

<div id="controls"> 
    <div id="countah"></div> 
    <a href="#" id=prev>prev</a> | 
    <a href="#" id=next>next</a> 
</div> 

CSS - 여기

.js .staceyPort { 
    display: none; 
    position : absolute; 
    top  : 0; 
    left  : 0; 
} 

#controls{ 
    position : fixed; 
    bottom  : 0; 
    left  : 0; 
    z-index : 1000; 
    background : gold; 
}​ 

데모입니다 : http://jsfiddle.net/jmPCt/21/