Wie kann ich jQuery load (), um abzuschließen, bevor fadeOut/fadeIn?

Question

Ich möchte einen AJAX-Aufruf über jQuery load () - und nur, wenn es gibt, dann fadeOut die alten Inhalte und fadeIn die neuen Inhalte.Ich möchte die alten Inhalte bleiben, die zeigen, bis die neuen Inhalte abgerufen werden, an welcher Stelle die fade-Out/In ausgelöst wird.

Verwendung:

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

der Inhalt ein-und ausgeblendet und ein paar Augenblicke später die load () - Aufruf zurückgegeben wird, und die Daten aktualisiert, aber der fade bereits abgeschlossen hat.

Answer 1

Verwenden von Rückrufen, um die Kontrolle der Reihenfolge der Anrufe.

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

(Hinweis:Ich bin mir nicht 100% sicher, wenn verwenden var $data = ... und $data.doStuff() tatsächlich funktioniert - wenn es funktioniert, es erspart Ihnen das nachschlagen der div in den DOM-Baum zu jeder Zeit, aber wenn es nicht funktioniert, entfernen Sie einfach die erste Zeile, und verwenden Sie $('#data') überall...

Answer 2

Das problem ist auf die Tatsache zurückzuführen, dass alle drei Funktionen, fadeOut, laden und fadeIn asynchron sind.Jeder der oben genannten Funktionen akzeptieren eine callback-argument (einer Funktion), die ausgeführt wird, wenn die Funktion beendet die Ausführung.E. g.

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

//Wenn Sie definiert haben 'functionToRunWhenFadeOutIsComplete" wird es ausgeführt nach fadeOut ist vorbei.

Mit diesem wissen bewaffnet, können Sie nun lösen Ihre problem.

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

Alternativ können Sie definieren, loadData, fadeInData als ein anonymer Funktionen inline.