jQuery: unterbrechen fadeIn()/fadeOut()

Question

Sagen wir, ich habe $ element.fadeIn (200) aufgerufen. 100 ms später passiert etwas auf dieser Seite und ich möchte diese Überblendung und sofort fadeOut() unterbrechen. Wie kann ich das machen?

Wenn Sie den Aufruf von $ element.fadeIn (200) .fadeOut (0) aufrufen, geschieht das fadeOut() erst, nachdem fadeIn() beendet wurde.

Gibt es auch eine Möglichkeit, $ Element zu untersuchen, um festzustellen, ob ein FadeIn() oder FadeOut() ausgeführt wird? Hat $ element ein .data() -Member, das sich ändert?

Answer 1

Versuchen Sie, die Animation aus der Warteschlange zu entfernen.

$('...').fadeIn(200).dequeue().fadeOut(0); 

http://api.jquery.com/queue/

http://api.jquery.com/dequeue/

Answer 2

AFAIK fadeIn und fadeOut laufen synchron, also nein, ich glaube nicht, dass Sie sie unterbrechen können, während sie ausgeführt werden. Sie müssten warten, bis die Ausführung abgeschlossen ist.

Wenn Sie die stop Methode für das Element aufrufen, werden alle Animationen gestoppt. Der Grund, warum der Aufruf in Ihrem Beispiel erst nach fadeIn aufgerufen wird, liegt daran, dass Animationen in einer Warteschlangen-ähnlichen Weise ausgeführt werden.

Answer 3

Sie können die Funktion stop() verwenden, um alle Animationen zu unterbrechen, die in diesem Moment stattfinden. Lass mich wissen, ob das funktioniert.

Answer 4

Es ist immer eine gute Übung, Funktionen, die sich auf eine Animation usw. beziehen, im Callback der Funktion zu behalten. Sie können sagen, ob die fadeIn(), indem Sie Ihre Funktion innerhalb seiner Rückruf beendet hat, wie:

$element.fadeIn(200, function(){ 
    //do callback 
}); 

Wenn das nicht möglich ist, dann können Sie eine Variable außerhalb der Funktion deklarieren. Sagen wir, var elmFadeInRunning = false. Ändern Sie es vor dem Aufruf von fadeIn in wahr rechts, und ändern Sie es im Callback von fadeIn zurück in false. Auf diese Weise können Sie wissen, ob es noch läuft, wenn elmFadeInRunning == true.

Answer 5

stop() werden nur Animationen entfernt, die noch nicht ausgeführt wurden.

Verwenden Sie stop(true, true), um die aktuelle Animation zu unterbrechen und zu entfernen!

Answer 6

Sie erhalten wird glatt fadeIn/Out-Effekt durch Warteschlange gelöscht wird, aber nicht bis zum Ende springen, mit .stop (wahr, falsch), aber bitte beachten Sie, dass als FadeIn auf diese Weise unterbrochen sein kann, FadeOut nicht. Ich habe es vor Jahren wie einen Bug gemeldet, aber das hat niemanden interessiert. FadeIn funktioniert nur, wenn das Objekt ausgeblendet ist. Aber es gibt Abhilfe ... verwenden fadeTo statt - es funktioniert auf versteckte sowie teilweise verblasste Objekte:

$('.a').hover(function(){ 
    $('.b').stop(true,false).fadeTo(3000,1); // <- fadeTo(), not FadeIn() (!!!) 
},function(){ 
    $('.b').stop(true,false).fadeOut(3000); 
}); 

Hier ist, wie es funktioniert: http://jsfiddle.net/dJEmB/

Answer 7

Ein weiteres Arbeitsbeispiel

<div id="fadediv">Yay, I like to fade</div> 
<button id="stopdatfade" >Stop that fade!</button> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 
<script> 
(function($){ 

    currentfade = $("#fadediv").fadeOut(5000).fadeIn(5000).fadeOut(5000).fadeIn(5000); 
    $('#stopdatfade').on('click', function() { 
     if (typeof currentfade !== 'undefined') { 

      currentfade.stop(true, true); 

     } 

    }); 
})(jQuery); 
</script>