jQuery
Méthode jQuery .animate ()
Recherche…
Syntaxe
- (sélecteur) .animate ({styles}, {options})
Paramètres
| Paramètre | Détails |
|---|---|
| Propriétés | Un objet de propriétés et de valeurs CSS vers lequel l'animation se déplacera |
| durée | (par défaut: 400) Chaîne ou nombre déterminant la durée d'exécution de l'animation |
| assouplir | (par défaut: swing) Chaîne indiquant la fonction d'accélération à utiliser pour la transition |
| Achevée | Une fonction à appeler une fois l'animation terminée, appelée une fois par élément correspondant. |
| début | spécifie une fonction à exécuter lorsque l'animation commence. |
| étape | spécifie une fonction à exécuter pour chaque étape de l'animation. |
| queue | une valeur booléenne spécifiant s'il faut ou non placer l'animation dans la file d'attente des effets. |
| le progrès | spécifie une fonction à exécuter après chaque étape de l'animation. |
| terminé | spécifie une fonction à exécuter à la fin de l'animation. |
| échouer | spécifie une fonction à exécuter si l'animation échoue. |
| specialEasing | une carte d'une ou plusieurs propriétés CSS du paramètre styles et leurs fonctions d'accélération correspondantes. |
| toujours | spécifie une fonction à exécuter si l'animation s'arrête sans se terminer. |
Animation avec rappel
Parfois, nous devons changer la position des mots d'un endroit à un autre ou réduire la taille des mots et changer automatiquement la couleur des mots pour améliorer l'attrait de notre site Web ou de nos applications Web. JQuery aide beaucoup avec ce concept en utilisant fadeIn(), hide(), slideDown() mais ses fonctionnalités sont limitées et il n'a fait que la tâche spécifique qui lui est assignée.
Jquery résout ce problème en fournissant une méthode étonnante et flexible appelée .animate() . Cette méthode permet de définir des animations personnalisées qui sont utilisées avec des propriétés css permettant de survoler les frontières. par exemple si on donne la propriété de style css en width:200; et la position actuelle de l'élément DOM est 50, la méthode animate réduit la valeur de la position actuelle à partir de la valeur css donnée et anime cet élément à 150.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$("#btn1").click(function(){
$("#box").animate({width: "200px"});
});
</script>
<button id="btn1">Animate Width</button>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;"></div>
Liste des propriétés de style css qui permettent la méthode .animate() .
backgroundPositionX, backgroundPositionY, borderWidth, borderBottomWidth, borderLeftWidth, borderRightWidth, borderTopWidth, borderSpacing, margin, marginBottom, marginLeft, marginRight, marginTop, outlineWidth, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, height, width, maxHeight, maxWidth, minHeight, minWidth, fontSize, bottom, left, right, top, letterSpacing, wordSpacing, lineHeight, textIndent,
Vitesse spécifiée dans la méthode .animate() .
milliseconds (Ex: 100, 1000, 5000, etc.),
"slow",
"fast"
.animate() spécifiée dans la méthode .animate() .
| "balançoire" |
| "linéaire" |
Voici quelques exemples avec des options d'animation complexes.
Exemple 1:
$( "#book" ).animate({
width: [ "toggle", "swing" ],
height: [ "toggle", "swing" ],
opacity: "toggle"
}, 5000, "linear", function() {
$( this ).after( "<div>Animation complete.</div>" );
});
Par exemple 2:
$("#box").animate({
height: "300px",
width: "300px"
}, {
duration: 5000,
easing: "linear",
complete: function(){
$(this).after("<p>Animation is complete!</p>");
}
});