méthode jquery animer()
Résultats de traduction:
animer
Anglais[ˈænɪmeɪt] 美[ˈænəˌmet]
vt. Animer; conduire; faire des mouvements réalistes;
méthode jquery animer()syntaxe
Fonction : La méthode animate() effectue des animations personnalisées des ensembles de propriétés CSS. Cette méthode fait passer un élément d'un état à un autre via les styles CSS. Les valeurs des propriétés CSS changent progressivement, vous permettant de créer des effets animés. Seules les valeurs numériques peuvent être animées (par exemple "margin:30px"). Les valeurs de chaîne ne peuvent pas être animées (telles que « background-color:red »). Utilisez "+=" ou "-=" pour créer des animations relatives.
Syntaxe 1 : $(sélecteur).animate(styles,vitesse,accélération,rappel)
Paramètres :
Paramètres | Description |
styles obligatoires . Spécifie les styles et les valeurs CSS qui produisent des effets d'animation. | |
Facultatif. Spécifie la vitesse de l'animation. La valeur par défaut est "normale". Valeurs possibles : millisecondes (par exemple 1500) "lent" "normal" "rapide" | |
Facultatif. Spécifie une fonction d'accélération qui définit la vitesse d'animation à différents points d'animation. Fonctions d'assouplissement intégrées : davantage de fonctions d'assouplissement sont fournies dans l'extension linéaire pivotante. | |
Facultatif. Fonction à exécuter après l'exécution de la fonction d'animation. |
Paramètres | Description |
styles | Obligatoire. Spécifie les styles et les valeurs CSS qui produisent des effets d'animation (comme ci-dessus). |
options | Facultatif. Spécifie des options supplémentaires pour l'animation. Valeurs possibles : speed - définit la vitesse de l'accélération de l'animation - spécifie la fonction d'accélération à utiliser. callback - spécifie la fonction à exécuter une fois l'animation terminée. step - spécifie la fonction à exécuter une fois chaque étape de l'animation terminée. - Valeur booléenne. Indique s'il faut placer l'animation dans la file d'attente des effets. Si faux, l'animation démarrera immédiatement specialEasing - une carte d'une ou plusieurs propriétés CSS du paramètre styles, et leurs fonctions d'assouplissement correspondantes |
méthode jquery animer()exemple
<html> <head> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $(".btn1").click(function(){ $("#box").animate({height:"300px"}); }); $(".btn2").click(function(){ $("#box").animate({height:"100px"}); }); }); </script> </head> <body> <div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;"> </div> <button class="btn1">Animate</button> <button class="btn2">Reset</button> </body> </html>
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne