animate().
Présentation de la méthode jQuery animate() et limitations
La méthode animate() va nous permettre de créer des effets ou d’animer n’importe quelle propriété CSS à valeur numérique. On va lui passer les propriétés qu’on souhaite animer en argument obligatoire.
On va ensuite également pouvoir lui passer une durée d’animation, une fonction d’accélération et une fonction de rappel à exécuter une fois l’animation terminée en arguments facultatifs.
Avant toute chose, notez qu’on ne va pas pouvoir utiliser animate n’importe quand ni n’importe comment. Tout d’abord, vous devez savoir que la plupart des propriétés CSS à valeur non numérique ne vont pas pouvoir être animées avec animate() avec du jQuery “standard” (du jQuery sans extension spécifique).
Impossible par exemple d’animer des propriétés CSS liées à la couleur avec animate() à moins d’utiliser l’extension jQuery.color.
Vous devez également savoir que les notations raccourcies des propriétés CSS comme font, border, etc. vont être mal supportées par animate(). On préfèrera donc toujours utiliser les versions complètes de ces propriétés lorsqu’on voudra les animer.
Exemples d’utilisation de jQuery animate()
On va pouvoir utiliser animate() pour animer une ou plusieurs propriétés CSS. Commençons déjà par animer les propriétés CSS une-à-une. On va par exemple pouvoir animer les propriétés width(), height et font-size d’un élément les unes après les autres.
See the Pen
Cours jQuery 4.3.1 by Pierre (@pierregiraud)
on CodePen.
Cet exemple contient de nombreuses choses intéressantes. Tout d’abord, vous pouvez remarquer qu’on utilise des crochets pour entourer la propriété à animer et sa valeur dans animate().
Ensuite, j’ai utilisé des des notations de valeurs relatives pour définir l’état final de ma propriété width. Ici, on diminue la largeur de notre h1 de 20% sur 1000ms. Ces notations sont parfaitement acceptées.
Pour animer ma propriété height, j’utilise ici le mot clé toggle plutôt que d’indiquer une dimension sous forme numérique. En effet, on va pouvoir utiliser l’un des mots clefs show, hide ou toggle en plus des valeurs numériques classiques pour animer nos propriétés avec animate().
Enfin, j’utilise ici des notations CamelCase pour mes différentes propriétés CSS. Ce type de notation consiste à supprimer les tirets des propriétés et à ajouter une majuscule aux mots suivants les tirets. On le voit bien avec fontSize. Notez que j’aurais tout aussi bien pu écrire "font-size". Dans ce cas, il aurait bien fallu ajouter des guillemets autour du nom de la propriété à animer.
Plutôt que d’animer les propriétés CSS une-à-une et indépendamment les unes des autres, on va pouvoir animer plusieurs propriétés en même temps en les passant en arguments de animate(). Pour faire cela, on va utiliser la syntaxe suivante :
See the Pen
Cours jQuery 4.3.2 by Pierre (@pierregiraud)
on CodePen.
La file d’attente ou queue des animations
Dans l’exemple précédent, nous avons fourni plusieurs propriétés CSS à la méthode animate(). Dans ce cas, lors du clic sur notre bouton, les différentes propriétés ont commencé à s’animer en même temps.
Que se passe-t-il maintenant si on choisit plutôt de chainer différentes méthodes d’animation à la suite ? Dans ce cas, les méthodes vont s’exécuter les unes à la suite des autres : chaque méthode va attendre que la précédente ait terminé son travail pour s’exécuter.
See the Pen
Cours jQuery 4.3.3 by Pierre (@pierregiraud)
on CodePen.
Que se passe-t-il exactement ici ? jQuery crée en fait une file d’attente ou “queue” en anglais lorsqu’on demande à exécuter plusieurs méthodes à la suite. Grosso modo, cela signifie que l’exécution des méthodes dans la file d’attente va être mise en attente jusqu’à ce que les méthodes qui se situent avant dans la queue aient terminé leur travail.
Dans le cas des méthodes d’animation, cela est particulièrement visible puisque ces méthodes sont par définition longues à s’exécuter. Cette file d’attente va pouvoir être manipulée grâce aux méthodes queue(), dequeue() et clearQueue() que nous étudierons dans la leçon suivante.
Pour en revenir à notre méthode animate(), nous allons pouvoir désactiver la file d’attente et forcer plusieurs animations à se lancer d’un coup. Pour cela, nous allons utiliser animate() sous la forme animate(proprietes, options). Le deuxième argument “options” va prendre la forme d’une liste qui va pouvoir contenir la durée d’animation, la fonction d’accélération, etc. ainsi qu’une option queue à laquelle on va pouvoir passer la valeur false pour désactiver la file d’attente.
See the Pen
Cours jQuery 4.3.4 by Pierre (@pierregiraud)
on CodePen.
