Pourquoi l'animation ne se termine pas avant le rappel

Question

Dans mon apprentissage, je l'ai toujours appris et compris dans callbacks jQuery comme ceci:

Une fonction de rappel est exécutée après l'animation en cours (effet) est terminé.

Avec les animations, la ligne de code suivante peut être exécutée même si l'animation n'est pas terminée. Cela peut créer des erreurs. Pour éviter cela, vous pouvez créer une fonction de rappel. La fonction de rappel ne sera pas appelée tant que l'animation n'est pas terminée. ^{Référence: www.w3schools.com[...]}

et

Un rappel est une fonction qui est passée comme argument pour une autre fonction et est exécutée après sa fonction parent est terminée. ^{Citation: www.jquery.com[...]}

Mais mon utilisation de rappel ne fonctionne pas pour une raison quelconque.

Regardez le code suivant:

$(page).slideUp("slow", function() { 

    $('div#details').html(details); 
    $(page).slideDown("slow");    

}); 

Cela devrait rendre la mise à glissière ContentBox et donc disparaître, le contenu est changé en quelque chose de nouveau, et enfin la glisse ContentBox vers le bas (apparaît) à nouveau. J'ai besoin que ces trois étapes se produisent l'une après l'autre dans cet ordre, mais chaque étape ne doit commencer que lorsque la précédente est terminée. Voilà pourquoi j'utilise un rappel au lieu d'avoir juste ceci:

$(page).slideUp("slow"); 

$('div#details').html(details); 

$(page).slideDown("slow"); 

qui fera tout arrive en même temps.

Mon code fonctionne, et je peux déplacer le contenu de la page à un clic d'un bouton. Mais les animations ne réagissent pas comme je m'y attendais. Lorsque le bouton est cliqué, le contenu disparaît immédiatement sans aucune diapositive animée. Le nouveau contenu est ensuite glissé dans une belle animation.

Click around the left sidemenu here, to see what happends.

Je ne comprends pas pourquoi il n'y a pas slideUp animé, mais je soupçonne que le rappel ne se comporte pas comme je l'aurais cru. Il semble que le rappel se déclenche lorsque la première animation démarre, au lieu d'attendre que l'animation soit terminée. Ou peut-être que c'est juste le slideUp qui ne fonctionne pas du tout?

Quelqu'un peut-il m'expliquer, ce que je ne sais pas et ne vois pas dans ce code extrêmement simple, y compris un rappel?

Answer 1

Mettre le slideDown dans le rappel

$(page).slideUp("slow", function() { 

    $('div#details').html(details); 
    $(page).slideDown("slow"); 
}); 

Votre code précédent mis à jour uniquement les #details div à la fin de slideUp.

Answer 2

Vous pouvez utiliser la fonction de délai comme solution de contournement.

$(page).slideUp(500); 
$('div#details').html(details); 
$(page).delay(500).slideDown(500);