Gérer la file d’attente en jQuery
Nous avons vu dans la partie précédente que je jQuery créait par défaut une file d’attente ou « queue » lorsque plusieurs effets étaient appliqués à un même élément via différents appels à une ou plusieurs méthodes.
On va pouvoir interagir de différentes façons avec cette file d’attente grâce à plusieurs méthodes jQuery :
- La méthode
queue(); - La méthode
dequeue(); - La méthode
clearQueue().
La méthode jQuery queue() va retourner les différentes fonctions de la file d’attente pour un élément ou nous permettre de manipuler la file d’attente de différentes façons selon le nombre d’arguments qu’on va lui passer.
On va déjà pouvoir utiliser queue() en lui passant le nom de la file d’attente en unique argument. Vous devez savoir ici que le nom par défaut de la file d’attente des effets jQuery est fx.
Le nom fx est implicite : on ne va pas être obligé de le préciser.
See the Pen
Cours jQuery 4.4.1 by Pierre (@pierregiraud)
on CodePen.
On va également pouvoir passer une fonction de rappel en deuxième argument de notre méthode queue() afin d’interagir avec la file d’attente. On va ainsi pouvoir ajouter de nouvelles animations à notre file d’attente par exemple.
Lorsqu’on ajoute une fonction de rappel avec queue(), on doit impérativement à la fin appeler également dequeue() afin de dire au jQuery de continuer à exécuter les animations suivantes.
En effet, la méthode dequeue() permet justement d’exécuter la prochaine fonction dans la file d’attente.
Prenons immédiatement un exemple utilisant queue() avec une fonction de rappel ainsi que dequeue() :
See the Pen
Cours jQuery 4.4.2 by Pierre (@pierregiraud)
on CodePen.
Ici, on utilise la méthode toggleClass() dans notre fonction de rappel associée à queue() afin de modifier la classe de notre div. On chaine finalement dequeue() pour pouvoir passer à l’animation suivante.
Si vous retirez l’appel à dequeue() du code ci-dessus, vous pouvez observer que l’animation stoppe après l’appel à queue().
Finalement, la méthode clearQueue() va nous permettre de supprimer toutes les fonctions actuellement dans la file d’attente.
Cette méthode est assez similaire à la méthode stop() que nous allons voir par la suite, à la différence que stop() ne va pouvoir être utilisée qu’avec les animations tandis que clearQueue() va pouvoir être utilisée de façon plus large pour supprimer également toute fonction ajoutée avec la méthode queue().
See the Pen
Cours jQuery 4.4.3 by Pierre (@pierregiraud)
on CodePen.
Stopper une animation avec les méthodes jQuery stop() ou finish()
On va également pouvoir stopper une animation et supprimer les fonctions actuellement dans la file d’attente avec les méthodes stop() ou finish().
La méthode stop(), tout d’abord, va par défaut mettre en pause l’animation en cours.
Cette méthode peut prendre deux booléens en arguments. Le premier booléen spécifie si les animations dans la file d’attente doivent également être supprimées (true) ou pas (false). La valeur par défaut est false.
Le deuxième argument booléen indique si l’animation en cours doit être complétée immédiatement (true) ou pas (false). Là encore, la valeur par défaut est false.
See the Pen
Cours jQuery 4.4.4 by Pierre (@pierregiraud)
on CodePen.
Dans l’exemple ci-dessus, on passe un premier booléen à true. Le deuxième argument utilise donc sa valeur par défaut qui est false.
Cela signifie que dès qu’un visiteur clique sur le bouton, l’animation est stoppée net (qui est le comportement par défaut de stop()) et que les autres animations dans la file sont supprimées (argument booléen true).
La méthode finish() va elle par défaut stopper immédiatement l’animation en cours et supprimer toutes les animations dans la file d’attente.
La méthode finish() diffère de la méthode stop() en un point : lorsqu’on l’utilise, les valeurs relatives aux propriétés CSS définies dans les animations vont être immédiatement définies sur leurs valeurs finales.
See the Pen
Cours jQuery 4.4.5 by Pierre (@pierregiraud)
on CodePen.
Ajouter un délai avant l’exécution d’animations avec delay()
La méthode delay() va nous permettre de définir un temps avant lequel certaines animations ne doivent pas être lancées. On va très souvent chaîner cette méthode entre deux animations.
On va devoir fournir un nombre de millisecondes correspondant au délai entre les deux animations en argument de cette méthode.
See the Pen
Cours jQuery 4.4.6 by Pierre (@pierregiraud)
on CodePen.
