Wie kann jQuery warten, bis ein Effekt beendet ist?

107

Ich bin mir sicher, dass ich neulich darüber gelesen habe, aber ich kann es anscheinend nirgendwo finden.
Ich habe ein fadeOut()Ereignis, nach dem ich das Element entferne, aber jQuery entfernt das Element, bevor es die Möglichkeit hat, das Ausblenden zu beenden.
Wie kann ich jQuery dazu bringen, zu warten, bis das Element ausgeblendet ist, und es dann entfernen?

jquery UriDium
quelle

Antworten:

167

Sie können eine Rückruffunktion angeben:

$(selector).fadeOut('slow', function() {
    // will be called when the element finishes fading out
    // if selector matches multiple elements it will be called once for each
});

Dokumentation hier .

Paolo Bergantino
quelle
Bingo. Ich dachte, es wäre das, aber ich musste meine gesamte Funktion dort platzieren, nicht nur den Teil zum Entfernen. PS Wenn jemand interessiert ist, ist das Buch, in dem ich es gelesen und jetzt wiedergefunden habe, Learning JQuery - Better Interaction and Design.
Nochmals vielen
Wenn jemand altes jQuery hat, dann war dieser "Animation erledigt Rückruf" Fehler ein böser: bugs.jquery.com/ticket/5684
JustAMartin
178

Mit der jQuery 1.6-Version können Sie die .promise()Methode verwenden.

$(selector).fadeOut('slow');
$(selector).promise().done(function(){
    // will be called when all the animations on the queue finish
});
Reinaldo Junior
quelle
4
Dies ist überflüssig für die meisten jQuery Animationen wie es Callback - args auf den meisten Methoden, aber mit promise()oder when()und done()Sie können einige sehr coole Verhalten von 3rd - Party - Methoden nutzen, oder sogar Ihre eigenen. +1 für die Bedeutung .promise()!
stuartc
4
Ich habe das noch nie gehört, habe nur meinen Hintern gerettet.
Prismspecs
1
In meinem Fall habe ich versucht, auf die aktuelle Animation eines Elements zuzugreifen, das an einer anderen Stelle in meinem Code vorkam, und hatte daher keinen Zugriff auf den Rückruf. +1
Kristian
11
Mit versprechen () können Sie auch einen einzelnen Rückruf einrichten, wenn alles erledigt ist. Wenn Sie fadeOut () für einen Satz von 10 Dingen aufrufen, gibt es für jedes Ding einen Rückruf, wobei 'this' auf den entsprechenden Bereich eingestellt ist. Wenn Sie nur einmal feuern möchten, ist diese Funktion sehr hilfreich. Außerdem: Wenn Sie einen Selektor animieren, der mit null Elementen übereinstimmt, wird der normale Rückruf niemals ausgelöst. Promise () wird am Ende ausgelöst, egal was passiert.
Zslayton
6
Sie können es auch so $(selector).fadeOut('slow').promise().done(function(){...});
verketten
9

Sie können auch verwenden $.when(), um bis zum promiseEnde zu warten :

var myEvent = function() {
    $( selector ).fadeOut( 'fast' );
};
$.when( myEvent() ).done( function() {
    console.log( 'Task finished.' );
} );

Wenn Sie eine Anfrage stellen, die ebenfalls fehlschlagen könnte, können Sie sogar noch einen Schritt weiter gehen:

$.when( myEvent() )
    .done( function( d ) {
        console.log( d, 'Task done.' );
    } )
    .fail( function( err ) {
        console.log( err, 'Task failed.' );
    } )
    // Runs always
    .then( function( data, textStatus, jqXHR ) {
        console.log( jqXHR.status, textStatus, 'Status 200/"OK"?' );
    } );
Kaiser
quelle
2
Dieser Teil dieser Antwort $.when()funktioniert nicht, da er myEvent()kein Versprechen zurückgibt und $.when()erwartet, dass Sie ihm ein oder mehrere Versprechen geben, damit er seine Arbeit erledigt .
jfriend00
6

Wenn Sie etwas wechseln möchten, indem Sie eines ausblenden und ein anderes an derselben Stelle ausblenden möchten, können Sie ein {position: absolute} -Attribut auf die divs setzen, sodass beide Animationen übereinander abgespielt werden und Sie es nicht haben Warten Sie, bis eine Animation beendet ist, bevor Sie die nächste starten.

Samin
quelle