Verhindern, dass ein anderes Ereignis ausgelöst wird, bevor ein vorheriges in jQuery abgeschlossen wurde?

Question

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

Ich bin ziemlich neu in JS und jQuery. Ich habe den gesamten Code von Hand in den obigen Link geschrieben. Es funktioniert und macht, was ich will, aber für eine Sache sparen. Wenn Sie schnell auf den Link "Weiter" klicken, wird entweder der nächste angezeigte Container angezeigt, oder wenn Sie schnell genug klicken, zeigt der Code zwei Container an, aber ich möchte nur, dass jeweils nur ein Container angezeigt wird. Gibt es eine Möglichkeit, dies in jQuery zu behandeln? Ich habe versucht, Stopps wie hier beschrieben zu verwenden: How to prevent jquery hover event from firing when not complete?, aber das löst das Problem nicht.

Answer 1

Sie suchen nach .stop(). Es ist Implementierung ändert sich mit dem gewünschten Verhalten aber die Dokumentation sollte das für Sie klären: http://api.jquery.com/stop

Hier eine Demo: http://jsfiddle.net/jmPCt/19/

Wegen, wie .stop() funktioniert, wenn Sie es mit .fadeIn() oder .fadeOut() Sie können chop- deine Animationen bis zu dem Punkt, an dem sie nicht mehr funktionieren. Die besten fix ich gefunden habe, ist, immer mit .fadeTo() zu absoluten Werten zu animieren: http://api.jquery.com/fadeTo

Hier den Code ist ich zu Ihrer JSFiddle hinzugefügt, dies überschreibt den Standard .fadeIn() und .fadeOut() jQuery-Funktionen mit denen, die .fadeTo() und .stop() verwenden:

$.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(); 
     } 
    }); 
}; 

aktualisieren

Wenn Sie die position Eigenschaft für die „slide“ Elemente gesetzt, dann können sie auf der jeweils anderen animieren, die die Sprunghaftigkeit entfernen, die Ihr Code 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; 
}​ 

Hier ist eine Demo: http://jsfiddle.net/jmPCt/21/