Méthode animate

La méthode animate permet de créer des effets d'animation pour diverses propriétés CSS. Le seul paramètre obligatoire est un objet avec des propriétés CSS, similaire à celui que nous passons à la méthode css. De nombreuses propriétés ayant des valeurs non numériques ou plusieurs valeurs ne peuvent pas être animées par la fonctionnalité de base de jQuery (par exemple background-color). Les noms abrégés des propriétés CSS ne sont pas toujours non plus supportés, par exemple font - à la place, il faut utiliser fontSize ou font-size. Avant les valeurs, on peut mettre '+=' ou '-=', dans ce cas la valeur spécifiée ensuite sera ajoutée ou soustraite de la valeur actuelle de la propriété. Au lieu de valeurs numériques, on peut aussi mettre show, hide ou toggle. Tous les effets jQuery, y compris animate, peuvent être désactivés globalement, en utilisant le paramètre jQuery.fx.off = true, qui fixe la valeur de la durée à 0.

Syntaxe

Le premier paramètre de l'animation est un objet avec les propriétés CSS et leurs valeurs au format clé: valeur, que nous allons animer. Les autres paramètres sont considérés comme facultatifs. Le deuxième paramètre définit la durée de l'animation en millisecondes, 400ms par défaut. Le troisième paramètre est la fonction d'interpolation (par défaut c'est swing), et le quatrième - la fonction de callback, qui sera exécutée après la fin de l'animation :

Le temps peut être défini non seulement en millisecondes, mais aussi avec les mots-clés slow (600ms) et fast (200ms), plus la valeur est grande, plus l'animation est lente. On peut passer en deuxième paramètre diverses options, sous la forme d'un objet JavaScript, contenant des paires clé: valeur :

Par exemple, définissons pour les propriétés CSS width et height la valeur toggle. La durée à 5000ms, passons les fonctions d'interpolation sous forme d'objet, pour la largeur ce sera une fonction linéaire, et pour la hauteur - easeOutBounce, également à la fin de l'animation, une fonction s'exécutera une fois (voir la clé complete), qui après l'élément avec #test placera un div avec l'inscription 'Animation complete.' :

Le tableau ci-dessous présente les propriétés et méthodes de l'objet options et leur description :

Nom	Description
duration	Durée de l'animation en millisecondes - chaîne ou nombre. 400ms par défaut.
easing	Définit quelle fonction d'interpolation utiliser. swing par défaut.
queue	Valeur booléenne ou chaîne. true par défaut. Indique s'il faut mettre l'animation en file d'attente. Avec la valeur false l'animation démarrera immédiatement. Si le paramètre est une chaîne, alors l'animation sera mise dans la file d'attente représentée par ce paramètre. Lors de l'utilisation d'une file d'attente avec un nom personnalisé, l'animation ne démarre pas automatiquement, pour la démarrer - utilisez dequeue('queuename').
specialEasing	Ici vous pouvez passer un objet, dans lequel les clés seront les propriétés CSS, et les valeurs - les fonctions d'interpolation correspondantes.
step	Fonction appelée pour chaque propriété animée de chaque élément animé. Elle permet de modifier l'objet Tween pour changer la valeur de la propriété avant qu'elle ne soit définie. Elle prend comme paramètres la valeur actuelle de tween et l'objet Tween.
progress	Fonction appelée après chaque étape de l'animation, une seule fois par élément indépendamment du nombre de propriétés animées. La fonction prend trois paramètres animation (sous forme de promesse), progress (nombre de 0 à 1) et remainingMs (nombre de millisecondes restantes).
complete	Fonction appelée une fois après la fin de l'animation de l'élément. La fonction prend animation (sous forme de promesse).
start	Fonction appelée lorsque l'animation de l'élément commence. La fonction prend animation (sous forme de promesse) et jumpedToEnd (Valeur booléenne. Si true, alors l'animation se termine automatiquement).
done	Fonction appelée lorsque l'animation de l'élément se termine (sa promesse est remplie avec succès). La fonction prend animation (sous forme de promesse) et jumpedToEnd (Valeur booléenne. Si true, alors l'animation se termine automatiquement).
fail	Fonction appelée lorsque l'animation de l'élément se termine avec une erreur (sa promesse est remplie avec une erreur). La fonction prend animation (sous forme de promesse) et jumpedToEnd (Valeur booléenne. Si true, alors l'animation se termine automatiquement).
always	Fonction appelée lorsque l'animation de l'élément se termine ou s'arrête sans être achevée (sa promesse est remplie avec succès ou avec une erreur). La fonction prend animation (sous forme de promesse) et jumpedToEnd (Valeur booléenne. Si true, alors l'animation se termine automatiquement).

Exemple

Déplaçons, lors d'un clic sur le bouton #left, le carré vert vers la gauche, et sur le bouton #right vers la droite de 50px, fixons également la durée à 600ms - avec la commande slow :

Voir aussi