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 :

vitesse easing rappel


Syntaxe 2 : $(sélecteur).animate(styles,options)

Paramètres :

ParamètresDescription
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).
optionsFacultatif. 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>
Exécuter l'instance »

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne