Comment puis-je obtenir la charge jQuery () pour terminer avant fadeOut / fadeIn?

Question

Je veux faire un appel AJAX via la charge jQuery () et seulement une fois qu'il retourne, puis fadeOut l'ancien contenu et fadeIn le nouveau contenu. Je veux rester vieux contenu montrant que le nouveau contenu est récupéré, à quel point le fondu Out / In est déclenché.

Utilisation:

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

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

Answer 1

Utilisez callbacks au contrôle de 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'utilisation var $data = ... et $data.doStuff() fait travailler - si elle le fait, il vous évite d'avoir à rechercher la div dans l'arbre DOM chaque fois, mais si elle ne le fait pas, il suffit de retirer la première ligne et utiliser $('#data') partout ...

Answer 2

Le problème est lié au fait que les trois fonctions, fadeOut, charge et fadeIn sont asynchrones. Chacune des fonctions ci-dessus acceptent un argument de rappel (une fonction) qui se déroulera lorsque la fonction a terminé l'exécution. Par exemple.

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

// Si vous avez défini 'functionToRunWhenFadeOutIsComplete' il courrons après fadeOut est terminée.

Armés de cette connaissance, vous pouvez 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.