¿Cómo puedo conseguir la carga jQuery () para completar antes de fadeOut / fadeIn?

Question

Quiero hacer una llamada AJAX a través de la carga jQuery () y sólo una vez que se vuelve, entonces fadeOut el viejo contenido y fadeIn el nuevo contenido. Quiero contenido antiguo a permanecer mostrando hasta que el nuevo contenido se recupera, momento en el que el fundido OUT / IN se activa.

Uso:

$('#data').fadeOut('slow').load('/url/').fadeIn('slow');

el contenido se desvanece dentro y fuera y unos momentos más tarde la de la carga () devuelve la llamada, y las actualizaciones de datos, pero el fundido ya se ha completado.

Answer 1

Utilice las devoluciones de llamada para el control del orden de las llamadas.

var $data = $('#data');
$data.fadeOut('slow', function() { 
    $data.load('/url/', function() { 
        $data.fadeIn('slow'); 
    }); 
});

(Nota: No estoy 100% seguro de si se utiliza var $data = ... y $data.doStuff() realmente va a funcionar - si lo hace, se le evita tener que buscar el div en el árbol DOM cada vez, pero si no es así, basta con retirar la primera línea y utilizar $('#data') en todas partes ...

Answer 2

El problema está relacionado con el hecho de que las tres funciones, fadeOut, carga y fadeIn son asíncronas. Cada una de las funciones anteriores aceptar un argumento de devolución de llamada (una función) que se ejecutará cuando la función ha terminado la ejecución. Por ejemplo.

$('#data').fadeOut(functionToRunWhenFadeOutIsComplete);

// Si ha definido 'functionToRunWhenFadeOutIsComplete' que se ejecuta después de fadeOut ha terminado.

Armado con este conocimiento, ahora se puede resolver su problema.

var fadeInData = function fadeInData() { $('#data').fadeIn(); }
var loadData = function loadData() { $('#data').load('url', fadeInData); }
$('#data').fadeOut(loadData);

Como alternativa, se puede definir loadData, fadeInData como un inline funciones anónimas.