Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

GESTION AVANCEE DES EFFETS ET ANIMATIONS EN JQUERY

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 selon le nombre d'arguments qu'on va lui passer.

Dans sa première utilisation, queue() ne va avoir besoin que du nom de la file d’attente en 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.

On utilise la méthode jQuery queue()

Essayer ce code

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() :

Utilisation des méthodes jQuery queue() et dequeue()

Essayer ce code

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().

Utilisation de la méthode jQuery clearQueue()

Essayer ce code

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 arrêter 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.

Utilisation de la méthode jQuery stop() pour arrêter une animation

Essayer ce code

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.

Essayez plutôt avec l’exemple suivant :

Utilisation de la méthode jQuery finish()

Essayer ce code

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.

Utilisation de la méthode jQuery delay()

Essayer ce code

Chapitre précédent

Chapitre suivant