jQuery effect - animate() method

Manuel de références des effets jQuery

Example

Change the height of the "div" element:

$(".btn1").click(function(){
  $("#box").animate({height:"300px"});
});

Try it yourself

Definition and usage

The animate() method performs a custom animation of a set of CSS properties.

This method changes an element from one state to another through CSS styles. The CSS property values change gradually, thus creating an animation effect.

Only numeric values can create animations (such as "margin:30px"). String values cannot create animations (such as "background-color:red").

Remarque :Use "+=" or "-=" to create relative animations (relative animations).

Syntax 1

$(selector).animate(styles,speed,easing,callback)
Paramètres Description
styles

Required. Specifies the CSS styles and values that produce the animation effect.

Possible CSS style values (with examples):

Remarque :Les styles CSS utilisent le nom du DOM (par exemple "fontSize") pour définir, plutôt que le nom CSS (par exemple "font-size").
speed

Optionnel. Définit la vitesse de l'animation. La valeur par défaut est "normal".

Valeurs possibles :

  • millisecondes (par exemple 1500)
  • "slow"
  • "normal"
  • "fast"
easing

Optionnel. Définit la fonction d'ajustement de la vitesse de l'animation à différents points d'animation.

Fonctions d'ajustement intégrées :

  • swing
  • linear

Des plugins d'extension fournissent plus de fonctions d'ajustement.
callback

Optionnel. Fonction à exécuter après l'exécution de la fonction animate.

Pour en savoir plus sur les callback, veuillez visiter notre jQuery Callback Ce chapitre.

Grammaire 2

$(selector).animate(styles,options)
Paramètres Description
styles Obligatoire. Définit les styles CSS et les valeurs qui produisent l'effet d'animation (comme ci-dessus).
options

Optionnel. Définit des options supplémentaires pour l'animation.

Valeurs possibles :

  • speed - vitesse de l'animation
  • easing - fonction d'ajustement à utiliser
  • callback - fonction à exécuter après la fin de l'animation
  • step - fonction à exécuter après chaque étape de l'animation
  • queue - valeur booléenne. Indique si l'animation doit être placée dans la file d'attente des effets. Si false, l'animation commence immédiatement
  • specialEasing - provenant de styles Mapping d'une ou plusieurs propriétés CSS et de leurs fonctions d'ajustement correspondantes

Manuel de références des effets jQuery