Créer des effets ou animations personnalisées

Dans ce nouveau cours, nous allons apprendre à créer des effets personnalisés ou des "animations" en utilisant la méthode jQuery animate().

Présentation de la méthode jQuery animate() et limitations

La méthode animate() nous permettra de créer des effets ou des animations sur n'importe quelle propriété CSS numérique. Nous lui passons les propriétés que nous voulons animer comme paramètres obligatoires.

Ensuite, nous pouvons également lui transmettre la durée de l'animation en millisecondes, la fonction d'accélérateur (vitesse de l’animation, swing : plus lentement au début / à la fin, mais plus rapidement au milieu par défaut ou linear : vitesse constante) et la fonction de rappel à exécuter après la fin de l'animation, il s’agit ici d’une fonction qui sera exécutée une fois que l’animation sera terminée, aussi appelée callback, en paramètres optionnels.

Tout d'abord, veuillez noter que vous ne pourrez pas utiliser l'animation à tout moment, n'importe où. Tout d'abord, vous devez savoir que la plupart des propriétés CSS non numériques ne peuvent pas être animées avec animate() en utilisant jQuery (jQuery sans extension spécifique).

Par exemple, sauf si vous utilisez l'extension jQuery.color, vous ne pouvez pas utiliser animate() pour animer les propriétés CSS liées aux couleurs.

Vous devez également connaître la notation abrégée des propriétés CSS, telles que les polices, les bordures, etc. animate() n'est pas bien prise en charge. Par conséquent, lorsque nous voulons les animer, nous aimons toujours utiliser la version complète de ces propriétés.

Exemples d’utilisation de jQuery animate()