jQuery faire des choses dans un ordre

Question

Comment faire pour que les choses se passent bien et dans l'ordre en fonction de mes actions.

-à-dire

var $content = $("#content"); 
$content.slideUp().html(''); 
$conten.html(from_my_ajax_request).slideDown(); 

Fondamentalement, je l'ai fait une demande ajax pour placer le contenu de div #content. Mais en exécutant ce qui précède, je peux voir le code entrer mais le slideUp ne se termine pas avant que slideDown prenne le dessus. Je voudrais évidemment que ce soit lisse.

J'espère que vous pouvez aider.

Answer 1

.html() n'est pas mis en file d'attente (il arrive immédiatement, indépendamment de f fx la file d'attente), alors soit utiliser la fonction de rappel .slideUp(), comme ceci:

$("#content").slideUp(function() { 
    $(this).html(from_my_ajax_request).slideDown(); 
}); 

Cela appelle la .html().slideDown() une fois que le .slideUp() soit terminé. Ou.queue(), comme ceci:

$("#content").slideUp().queue(function(n) { 
    $(this).html(from_my_ajax_request); n(); 
}).slideDown(); 
//or... 
$("#content").slideUp().queue(function() { 
    $(this).html(from_my_ajax_request).dequeue(); 
}).slideDown(); 

Cela met en fait comme une étape de file d'attente fx l'appel .html(), et il exécuterons .slideDown() après qu'il est complet.

Answer 2

var $content = $("#content"); 
$content.slideUp(function() { 
    $content.html(''); 
    $content.html(from_my_ajax_request).slideDown(); 
}); 

De cette façon, vous utilisez le rappel pour déclencher la deuxième partie de votre animation lorsque la première est terminée.

slideUp docs

Answer 3

Vous pouvez passer un rappel à slideUp et obtenir que pour exécuter l'étape suivante:

http://api.jquery.com/slideUp/

Ou vous pouvez utiliser l'appel Animer:

http://api.jquery.com/animate/