Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

CREER DES EFFETS OU ANIMATIONS PERSONNALISES EN JQUERY

Découverte de la méthode jQuery animate()

On va pouvoir créer des effets ou animations personnalisées grâce à la méthode jQuery animate().

Pour cela, on va devoir fournir une ou plusieurs propriétés CSS dont on souhaite modifier le comportement sur la durée en argument de animate().

Attention cependant : la méthode animate() va fonctionner avec toutes les propriétés CSS de type numérique, c’est-à-dire celles dont les valeurs peuvent être numériques (comme les propriétés CSS width et height par exemple), mais nombre de propriétés CSS non numériques ne vont pas pouvoir être animées avec le jQuery « de base » (c’est-à-dire sans plugin).

Par exemple, les propriétés CSS relatives à la couleur de vont pas pouvoir être utilisées avec la méthode animate() à moins d’utiliser le plugin jQuery.Color.

On va également pouvoir passer une durée et une fonction de rappel en arguments de animate(), comme on en a l’habitude avec les effets jQuery.

Premières utilisations de animate()

Voyons immédiatement en pratique comme fonctionne la méthode animate().

Pour commencer, nous allons simplement essayer de modifier progressivement la position et la taille d’un élément h1.

Utilisation de la méthode jQuery animate()

Essayer ce code

Ce premier exemple nous fournit déjà beaucoup d’éléments. Tout d’abord, remarquez la syntaxe utilisée avec la méthode animate() : il va falloir encadrer la propriété CSS et sa valeur par des accolades.

Ensuite, vous pouvez remarquer qu’on peut utiliser différents types de valeurs et d’opérateurs avec animate().

En effet, notre premier bouton se charge de diminuer la taille de notre élément h1 relativement à sa taille de départ.

En revanche, le deuxième bouton fixe une nouvelle taille de texte de manière absolue. Notez au passage que l’on utilisera les notations CamelCase avec la méthode animate() pour les noms de propriétés CSS. Pour rappel, la notation CamelCase supprime les tirets et les remplace par une majuscule. Par exemple, font-size devient fontSize.

Pensez bien à préciser une autre valeur que static pour la propriété CSS position afin de voir les effets des propriétés left, top, right et bottom.

Plusieurs animations d’un coup avec animate() en jQuery

On va encore pouvoir animer plusieurs propriétés CSS d’un coup en utilisant une seule fois la méthode animate(). Dans ce cas là, la syntaxe utilisée est un peu différente.

Regardez plutôt l’exemple suivant :

Utilisation avancée de la méthode animate()

Essayer ce code

Je vous laisse intégrer cette syntaxe qui ressemble à celle déjà utilisée lorsqu’on créait plusieurs gestionnaires d’évènements d’un coup avec on().

Le concept de file d’attente ou de « queue »

Comme on a pu le constater dans l’exemple précédent, il est tout à fait possible d’appliquer plusieurs effets ou animations à un même élément.

Lorsqu’on applique plusieurs effets au sein d’un même instruction animate(), tous les effets se lancent en même temps.

Cependant, ce cas est exceptionnel. En effet, si l’on choisit d’appliquer plusieurs effets différents en faisant plusieurs appels à une ou plusieurs méthodes en jQuery, les effets vont s’appliquer les uns à la suite des autres, dans l’ordre de leur écriture.

Regardez plutôt l’exemple suivant pour bien comprendre :

Le concept de queue en jQuery

Essayer ce code

Comme vous pouvez le remarquer, dans l’exemple précédent, chacun des effets ne se lance que lorsque le précédent est terminé.

Cela est dû au fait que le jQuery, par défaut, crée une file d’attente ou « queue » lorsque plusieurs effets sont appliqués au même élément via plusieurs appels à une ou plusieurs méthodes. Ensuite, les différents effets sont exécutés un par un.

Cette fonctionnalité du jQuery est très puissante et très utile, donc pensez à en tirer profit si vous souhaitez lancer plusieurs animations à la suite.

Notez qu’on va pouvoir désactiver la file d’attente et pouvoir forcer le lancement de plusieurs animations d’un coup en ajoutant un argument queue à notre méthode animate() et en lui attribuant la valeur false (la valeur par défaut est true).

Dans ce cas là, il faudra utiliser la syntaxe suivante :

Désactivation de la file d’attente jQuery

Essayer ce code

Chapitre précédent

Chapitre suivant