Come posso ottenere jQuery load () per completare prima di fadeOut / fadeIn?

Question

Voglio fare una chiamata AJAX tramite jQuery load () e solo una volta ritorna, quindi fadeOut il vecchio contenuto e fadeIn il nuovo contenuto. Voglio vecchi contenuti di restare mostrando fino a che il nuovo contenuto viene recuperato, a quel punto la dissolvenza Out / In si attiva.

Utilizzo:

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

il contenuto svanisce dentro e fuori e qualche istante più tardi il carico () chiamata restituisce, e gli aggiornamenti dei dati, ma la dissolvenza ha già completato.

Answer 1

Utilizzare i callback al controllo l'ordine delle chiamate.

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

(Nota: io non sono sicuro al 100% circa se si utilizza var $data = ... e $data.doStuff() sarà effettivamente funziona - se lo fa, si evita di dover cercare il div nell'albero DOM ogni volta, ma se così non fosse, è sufficiente rimuovere la prima riga e usare $('#data') ovunque ...

Answer 2

Il problema è legato al fatto che tutte le tre funzioni, fadeOut, carico e fadeIn sono asincrone. Ciascuna di queste funzioni accettano un argomento callback (una funzione) che verrà eseguito quando la funzione è terminato l'esecuzione. Per es.

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

// Se è stato definito 'functionToRunWhenFadeOutIsComplete' sarà eseguito dopo fadeOut è finita.

Armati di questa conoscenza, è ora possibile risolvere il problema.

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

In alternativa, è possibile definire loadData, fadeInData come un inline funzioni anonime.