¿Cómo puedo conseguir la carga jQuery () para completar antes de fadeOut / fadeIn?
Pregunta
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.
Solución
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 ...
Otros consejos
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.