ejemplos - jQuery: esperar a que se complete el fadeOut antes de ejecutar fadeIn

jquery hide

Question

Me preguntaba si hay alguna forma de esperar hasta que se complete el fadeOut antes de que comience el fadeIn, ya que cuando ejecuto el siguiente código, coloca un div debajo del otro, luego cuando se desvanece se mueve hacia arriba ... se ve un poco feo.

El código es el siguiente:

$(''.sidebarform'').fadeOut(''slow'');
$(''.sidebarsuccess'').fadeIn(''slow'');

Answer 1

Estoy usando las colas de jQuery: te permite poner cualquier cosa en la pila de fx (y la cancelación también funciona con ella):

$(''.sidebarform'').fadeOut(''slow'').queue(function(done) {
    $(''.sidebarsuccess'').fadeIn(''slow'');
    done();
}) .... other chained effects

Si no se utilizan más efectos, done() puede eliminarse. .queue() mantendrá la pila hasta que se llame a done() - útil para la ejecución asíncrona.

Answer 2

La función fadeOut tiene una devolución de llamada que se ejecuta cuando se realiza la animación:

$(''.sidebarform'').fadeOut(''slow'', function() {
    $(''.sidebarsuccess'').fadeIn(''slow'');
});

Answer 3

Otra opción es usar la promesa que esperará a que todas las animaciones pendientes en .sidebarform se completen primero, incluso si se iniciaron en otro lugar:

$(''.sidebarform'').fadeOut(''slow'').promise().done(function() {
    $(''.sidebarsuccess'').fadeIn(''slow'');
});