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