Comment faire pour que jQuery load() se termine avant fadeOut/fadeIn?

Question

Je veux faire un appel AJAX via jQuery load() et seulement une fois qu'il revient, puis fadeOut l'ancien contenu et fadeIn le nouveau contenu. Je veux que l'ancien contenu reste affiché jusqu'à ce que le nouveau contenu soit récupéré, auquel cas le fondu entrant/sortant est déclenché.

utilisant:

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

le contenu se fane dans et hors et quelques instants plus tard, la charge de la() retourne l'appel, et les mises à jour de données, mais le fondu a déjà terminé.

Answer 1

Utilisez les rappels pour contrôler l'ordre des appels.

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

(Note: Je ne suis pas sûr à 100% en cas d'utilisationvar $data = ...et$data.doStuff()va effectivement travailler - si elle le fait, il vous évite d'avoir à regarder la div dans l'arbre DOM à chaque fois, mais si elle n'a pas, il suffit de retirer la première ligne et l'utilisation$('#data')partout ...

Answer 2

le problème est lié au fait que les trois fonctions, fadeOut, charge et fadeIn sont asynchrones. chaque de l'abov Les fonctions e acceptent un argument de rappel (une fonction) qui sera exécuté lorsque la fonction aura fini d'être exécutée. Par exemple.

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

// Si vous avez défini 'functionToRunWhenFadeOutIsComplete' il courrons après fadeOut est terminée. Forte de cette connaissance, vous pouvez maintenant résoudre votre problème.

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

Vous pouvez définir loadData, fadeInData en tant que fonctions anonymes inline.