¿Cómo hacer que jQuery espere hasta que se termine un efecto?

Question

Estoy seguro de que leí sobre esto el otro día, pero parece que no puedo encontrarlo en ningún lado.
Tengo un evento fadeOut() después del cual elimino el elemento, pero jQuery está eliminando el elemento antes de que tenga la posibilidad de terminar de desvanecerse.
¿Cómo puedo obtener jQuery para esperar hasta que el elemento se haya desvanecido, y luego eliminarlo?

Answer 1

Puede especificar una función de devolución de llamada:

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

Documentation here.

Answer 2

si es algo que desea cambiar, atenuar uno y desvanecer otro en el mismo lugar, puede colocar un atributo {position: absolute} en los divs, para que las dos animaciones se superpongan, y usted no tiene que esperar a que termine una animación antes de comenzar la siguiente.

Answer 3

Con la versión jQuery 1.6 puede usar el método .promise().

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

Answer 4

Puede también utilizar $.when() que esperar hasta que el promise final:

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

En caso de que usted está haciendo una solicitud para que así pudiera fallar, después, se puede ir un paso más allá:

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