Méthode jQuery animate()
Exemple
"Animez" un élément, en changeant sa hauteur :
$("button").click(function(){
$("#box").animate({height: "300px"});
});
Définition et utilisation
La méthode animate() effectue une animation personnalisée d'un ensemble de propriétés CSS.
Cette méthode change un élément d'un état à un autre avec des styles CSS. La valeur de la propriété CSS est modifiée progressivement, pour créer un effet animé.
Seules les valeurs numériques peuvent être animées (comme "margin:30px"). Les valeurs de chaîne ne peuvent pas être animées (comme "background-color:red"), à l'exception des chaînes "show", "hide" et "toggle". Ces valeurs permettent de masquer et d'afficher l'élément animé.
Astuce : Utilisez "+=" ou "-=" pour les animations relatives.
Syntaxe
(selector).animate({styles},speed,easing,callback)
| Parameter | Description |
|---|---|
| styles | Required. Specifies one or more CSS properties/values to animate. Note: The property names must be camel-cased when used with the animate() method: You will need to write paddingLeft instead of padding-left, marginRight instead of margin-right, and so on. Properties that can be animated: Only numeric values can be animated (like "margin:30px"). String values cannot be animated (like "background-color:red"), except for the strings "show", "hide" and "toggle". These values allow hiding and showing the animated element. |
| speed | Optional. Specifies the speed of the animation. Default value is 400 milliseconds Possible values:
|
| easing | Optional. Specifies the speed of the element in different points of the animation. Default value is "swing". Possible values:
|
| callback | Optional. A function to be executed after the animation completes. To learn more about callback, please read our jQuery Callback chapter |
Syntaxe alternative
(selector).animate({styles},{options})
| Parameter | Description |
|---|---|
| styles | Required. Specifies one or more CSS properties/values to animate (See possible values above) |
| options | Optional. Specifies additional options for the animation. Possible values:
|
Essayez-le vous-même - Exemple
de rappel Comment utiliser animate() avec une fonction de rappel qui répète l'animation.
Utilisation de la syntaxe alternative pour spécifier plusieurs styles et options d'animation.
de progression Comment utiliser la méthode animate() pour créer une barre de progression.
Comment utiliser animate() pour ajouter un défilement fluide aux liens.