FadeIn/FadeOut : différence entre chaining et callback ?

Bonjour à tous,

J'ai une question concernant le chaining et les callbacks. J'ai implémenté une fonctionnalité simple dans laquelle un élément est déplacé d'une liste à une autre. Je souhaitais que cela donne lieu à un fadeOut() pour l'endroit d'où l'élément est supprimé, et un fadeIn() pour l'endroit où l'élément est ajouté.

J'ai abouti au code suivant (qui fonctionne), qui utilise le callback de fadeOut() :

Code:

---

1 2 3

$(this).fadeOut(300, function() { $(this).prependTo("ul#dest").fadeIn(300); });

---

En revanche, j'avais auparavant testé le code suivant avec du chaining, ça ne fonctionne pas, il semble que le prependTo() soit exécuté sans attendre que le fadeOut() ne se termine :

Code:

---

$(this).fadeOut(300).prependTo("ul#dest").fadeIn(300);

---

Je n'ai pas l'habitude d'utiliser le chaining, et j'étais donc curieux de savoir ce que j'avais raté et qui faisait que cette 2nde solution ne fonctionnait pas. Si quelqu'un peut m'éclairer, je lui en serai reconnaissant :)

D'avance merci :)
PierreAd

Bonsoir

Votre code est bon et votre analyse du problème également.

Les "instructions" chaînées sont bien appelées dans l'ordre du chaînage, mais cela ne signifie pas que l'instruction n attend obligatoirement que l'instruction n-1 termine son action pour être appelée.

Le problème est évident lorsqu'on enchaîne des animations, mais il est toujours présent et il peut conduire à des catastrophes lors de manipulation de données.

Merci danielhagnoul pour cette réponse. C'est effectivement ce que j'en ai petit à petit déduit. Si vous me le permettez, je vais compléter ça au moyen d'informations trouvées hier soir sur StackOverflow :

:arrow: Le fadeIn() / fadeOut() sont des opérations asynchrones qui "retournent" donc immédiatement après avoir été lancées. C'est pour ça que le chaining traditionnel (ma seconde syntaxe) ne fonctionne pas, et que le prependTo() est exécuté presque aussitôt que le fadeOut() se lance. Et c'est donc pour cela qu'il est nécessaire d'utiliser le callback de la fonction fadeOut() pour bien attendre la fin de l'animation.


:arrow: Le chaining d'animations est une exception à ce concept. Lorsque l'on chaîne des animations, elles vont se placer dans une file d'événements dédiée : chaque animation placée dans cette file d'attente attend alors la fin de l'animation précédente avant de se lancer. Ainsi :

Code:

---

$(this).fadeOut().fadeIn().fadeOut().fadeIn();

---

...s'exécutera correctement sans que je ne doive faire appel aux callbacks de chaque méthode.


danielhagnoul, merci pour ta réponse encore une fois, je marque ce sujet résolu, en espérant que nos réponses pourront aider d'autres forumistes :)