Derniers tutoriels de développement web
 

jQuery animate() Method

<Méthodes jQuery Effet

Exemple

"Animer" un élément, en changeant sa hauteur:

$("button").click(function(){
    $("#box").animate({height: "300px"});
});
Essayez - le vous - même »

Définition et utilisation

L' animate() méthode effectue une animation personnalisée d'un ensemble de propriétés CSS.

Cette méthode modifie un élément d'un état à l'autre avec des styles CSS. La valeur de la propriété CSS est modifiée progressivement, pour créer un effet d'animation.

Seules les valeurs numériques peuvent être animés (comme "margin:30px" ). Les valeurs de chaîne ne peuvent pas être animés (comme "background-color:red" ), sauf pour les chaînes "show", "hide" et "toggle" . Ces valeurs permettent de cacher et de montrer l'élément d'animation.

Astuce: Utilisez "+=" "-=" "+=" "-=" Pour les animations relatives.

Syntaxe

(selector).animate({styles},speed,easing,callback)

Paramètre La description
styles Obligatoire. Indique un ou plusieurs propriétés CSS / valeurs pour animer.

Remarque: Les noms de propriété doivent être CamelCase lorsqu'il est utilisé avec l' animate() méthode: Vous aurez besoin d'écrire paddingLeft au lieu de padding-left, marginRight au lieu de la marge de droite, et ainsi de suite.

Les propriétés qui peuvent être animés:


Seules les valeurs numériques peuvent être animés (comme "margin:30px" ). Les valeurs de chaîne ne peuvent pas être animés (comme "background-color:red" ), sauf pour les chaînes "show", "hide" et "toggle" . Ces valeurs permettent de cacher et de montrer l'élément d'animation.

Astuce: animations de couleurs ne sont pas inclus dans le noyau de bibliothèque jQuery.Si vous souhaitez animer la couleur, vous devez télécharger le plug - jQuery.com in Couleur Animations de jQuery.com
speed Optionnel. Indique la vitesse de l'animation. La valeur par défaut est de 400 millisecondes

Valeurs possibles:

  • millisecondes (comme 100, 1000, 5000, etc.)
  • "slow"
  • "fast"
easing Optionnel. Est la vitesse de l'élément en différents points de l'animation. La valeur par défaut est "swing" . Valeurs possibles:
  • "swing" - se déplace plus lentement au début / fin, mais plus rapide dans le milieu
  • "linear" - se déplace dans une vitesse constante
Astuce: Plus fonctions d' accélération sont disponibles dans les plugins externes.
callback Optionnel. Une fonction à exécuter après l'animation complète. Pour en savoir plus sur le rappel, s'il vous plaît lire notre jQuery Callback chapitre

Alternate Syntaxe

(selector).animate({styles},{options})

Paramètre La description
styles Obligatoire. Indique un ou plusieurs propriétés CSS / valeurs pour animer (voir les valeurs possibles ci-dessus)
options Optionnel. Spécifie des options supplémentaires pour l'animation. Valeurs possibles:
  • duration - définit la vitesse de l'animation
  • easing - spécifie la fonction d'accélération à utiliser
  • complete - spécifie une fonction à exécuter après l'animation complète
  • step - spécifie une fonction à exécuter pour chaque étape de l'animation
  • progress - spécifie une fonction à exécuter après chaque étape dans l'animation
  • queue d' queue - une valeur booléenne indiquant si oui ou non de placer l'animation dans la file d'attente des effets
  • specialEasing - une carte d'une ou plusieurs propriétés CSS de la > styles paramètre, et leurs fonctions correspondantes assouplissement
  • start - spécifie une fonction à exécuter lorsque commence l'animation
  • done - spécifie une fonction à exécuter lorsque les extrémités d'animation
  • fail - spécifie une fonction à exécuter si l'animation ne parvient pas à terminer
  • always - spécifie une fonction à exécuter si l'animation se fige sans terminer

Essayez-le vous-même - Exemples

Utilisation animate() avec une fonction de rappel
Comment utiliser animate() avec une fonction de rappel qui se répète l'animation.

Autre Syntaxe Exemple
Utilisation de la syntaxe alternative pour spécifier plusieurs styles et options animation.

Utilisation animate() pour créer une barre de progression
Comment utiliser l' animate() méthode pour créer une barre de progression.

Ajouter le défilement régulier à la page ancres
Comment utiliser animate() pour ajouter le défilement régulier aux liens.

<Méthodes jQuery Effet