Comment obtenez-vous JQuery attendre jusqu'à ce qu'un effet est fini?

Question

Je suis sûr que j'ai lu à ce sujet l'autre jour, mais je n'arrive pas à trouver où. J'ai un fadeOut événement après lequel j'ai supprimer l'élément et JQuery est la suppression de l'elemnt avant qu'il ait une chance de finir la décoloration. Quelle est la solution à ce nouveau?

Answer 1

Avec jQuery 1.6 version, vous pouvez utiliser l' .promise() méthode.

$(selector).fadeOut('slow');
$(selector).promise().done(function(){
    // will be called when all the animations on the queue finish
});

Answer 2

Vous pouvez spécifier une fonction de rappel:

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

La Documentation ici.

Answer 3

Vous pouvez ainsi utiliser $.when() attendre jusqu'à ce que l' promise fini:

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

Dans le cas où vous faites une demande qui pourrait ainsi échouent, vous pouvez même aller plus loin:

$.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"?' );
    } );

Answer 4

si c'est quelque chose que vous souhaitez passer, une décoloration et la décoloration de l'autre dans le même lieu, vous pouvez placer un {position:absolute} l'attribut de la balise div, donc, à la fois le jeu d'animations sur le dessus de l'un l'autre, et vous n'avez pas à attendre pour une animation de plus de avant de commencer le suivant.