Comment utiliser Animate pour personnaliser l'animation dans jQuery

Animation animate()

　01. Utilisation simple de la méthode animate()

　Certaines animations complexes ne peuvent pas être réalisées grâce à plusieurs fonctions d'animation apprises auparavant, et cette fois c'est une méthode d'animation puissante .

Faites fonctionner un élément pour effectuer une animation de fondu entrant de 3 secondes. Comparez les différences entre les deux ensembles de paramètres d'animation.

$(elem).fadeOut(3000)
$(elem).animate({
opacity:0
},3000)

Il est évident que la méthode d'animation est plus flexible et peut contrôler avec précision les attributs de style pour effectuer une animation.

Syntaxe :

1 .animate(propriétés [, durée ] [, assouplissement ] [, complète ] )

2 .animate( propriétés, options )

　La méthode .animate() nous permet de créer des animations sur n'importe quelle propriété CSS numérique. Les deux syntaxes sont presque identiques. Le seul attribut nécessaire est un ensemble de paires clé-valeur d'attribut CSS. Cet ensemble de propriétés est similaire aux paires clé-valeur de propriété utilisées pour définir la méthode .css(), sauf que la portée de la propriété est plus restreinte. Quant au deuxième paramètre, plusieurs paramètres réels peuvent être transmis individuellement ou combinés en un seul objet.

Décomposition des paramètres :

propriétés : un objet Object composé de paires clé-valeur d'une ou plusieurs propriétés CSS. Il est important de noter que toutes les propriétés utilisées pour l'animation doivent être numériques, sauf indication contraire ; ces propriétés ne pourront pas utiliser les fonctionnalités de base de jQuery si elles ne sont pas numériques. Par exemple, les effets courants, bordure, marge, remplissage, largeur, hauteur, police, gauche, haut, droite, bas, wordSpacing, etc., peuvent tous produire des effets d'animation. La couleur d'arrière-plan n'est évidemment pas possible, car le paramètre est une valeur telle que rouge ou GBG, ce qui est très utile pour les plug-ins, sinon l'effet d'animation ne peut pas être obtenu dans des circonstances normales. Notez que les styles CSS sont définis à l'aide de noms DOM (tels que "fontSize"), et non de noms CSS (tels que "font-size").

Portez une attention particulière à l'unité, l'unité de la valeur de l'attribut est le pixel (px), sauf indication contraire. Les unités em et % doivent être spécifiées en utilisant

.animate({
left: ,
width: 'px'
opacity: 'show',
fontSize: "em",
}, );

En plus de définir des valeurs, chaque attribut peut utiliser « afficher », « cacher » et 'basculer'. Ces raccourcis permettent de masquer et d'afficher des animations personnalisées pour contrôler l'affichage ou le masquage d'éléments

.animate({
width: "toggle"
});

Si une valeur commençant par = ou -= est fournie, alors la valeur cible est calculée en ajoutant ou en soustrayant le nombre donné de la valeur actuelle de cet attribut

.animate({
left: '+50px'
}, "slow");

durée : temps

Le temps d'exécution de l'animation, la durée est en millisecondes ; plus la valeur est grande, plus l'exécution de l'animation est lente, pas plus rapide. Il est également possible de prévoir des chaînes « rapides » et « lentes », indiquant respectivement des durées de 200 et 600 millisecondes.
Algorithme pour faciliter le mouvement de l'animation :

La bibliothèque jQuery est la bibliothèque par défaut lors de l'appel de swing. Animez à une vitesse constante. Si vous avez besoin d'autres algorithmes d'animation, veuillez rechercher les plug-ins associés

rappel complet

Fonction exécutée lorsque l'animation est terminée. l'animation actuelle est déterminée Une fois terminée, elle déclenchera la méthode

02.animate() pour exécuter plusieurs animations en séquence

animate Lors de l'exécution de l'animation, si vous devez observer une exécution conditions de l'animation, ou pendant l'animation. Pour effectuer un autre traitement à un certain moment en cours, nous pouvons utiliser animate pour fournir une deuxième syntaxe de réglage, passer un paramètre d'objet et recevoir des notifications sur l'état d'exécution de l'animation.

.animate(propriétés, options)

paramètres d'options

durée - Définit le temps d'exécution de l'animation
easing - Spécifiez la fonction d'assouplissement à utiliser, à quelle transition utiliser la fonction Easing
step : stipule la fonction à exécuter une fois chaque étape de chaque animation terminée
progress : Ce rappel sera exécuté à chaque fois que l'animation est appelée, ce qui est une notion de progression
complete : rappel lorsque l'animation est terminée

Si plusieurs éléments s'animent, le rappel sera exécuté une fois pour chaque élément correspondant, pas une fois pour toute l'animation

Liste des méthodes courantes

$('#elem').animate({
width: 'toggle',
height: 'toggle'
}, {
duration: ,
specialEasing: {
width: 'linear',
height: 'easeOutBounce'
},
complete: function() {
$(this).after(&#39;<div>Animation complete.</div>&#39;);
}
});

Appelez la méthode animate() pour créer un effet d'animation personnalisé. Son format d'appel est :

$(selector).animate({params},speed. , [callback])

Parmi eux, le paramètre params est le nom et la valeur de la propriété CSS utilisée pour créer l'effet d'animation, le paramètre speed est la vitesse de l'effet d'animation, en millisecondes, et le paramètre de rappel facultatif est exécuté lorsque l'animation est terminée. Le nom de la fonction de rappel.

Par exemple, appelez la méthode animate() pour afficher l'image avec un effet d'animation allant de petit à grand, comme indiqué ci-dessous :

<body>
<h>制作简单的动画效果</h>
<img src="images/.png" alt=""/>
<div id="tip"></div>
<script type="text/javascript">
$(function() {
$(&#39;img&#39;).animate({
width: &#39;px&#39;;
height:&#39;px&#39;
}, , function() {
$("#tip").html(&#39;执行完成！&#39;);
});
})
</script>
</body>

L'effet affiché dans le navigateur :

Comme le montre l'image, la méthode animate() est appelée pour afficher l'élément d'image avec une animation qui s'agrandit progressivement Lorsque l'animation est terminée. Ensuite, les mots "Execution Completed!" sont affichés dans l'élément

Pour plus d'articles sur la façon d'utiliser animate pour personnaliser les animations dans jQuery, veuillez faire attention au site Web PHP chinois !