Explication graphique et textuelle détaillée de la façon d'utiliser l'assouplissement animé jQuery

Comme vous pouvez le savoir grâce à la documentation de l'API jQuery, la fonction d'animation personnalisée jQuery .animate( propriétés [, durée] [, easing] [, complète] ) a quatre paramètres :

• propriétés : un ensemble Une collection contenant les propriétés de style et leurs valeurs en tant que propriétés d'animation et valeurs finales

• durée (facultatif) : temps d'exécution de l'animation, dont la valeur peut être une chaîne à l'une des trois vitesses prédéterminées ( "lent", "normal" ou "rapide") ou une valeur en millisecondes indiquant la durée de l'animation (par exemple : 1000)

• easing (facultatif) : le nom de l'effet de transition à appliquer utilisé, tel que : "linéaire" ou "swing"

• complet (facultatif) : fonction exécutée lorsque l'animation est terminée

Le paramètre easing a deux effets par défaut : " Linear" et "swing", si vous avez besoin de plus d'effets, vous avez besoin de la prise en charge du plug-in. Le plugin jQuery Easing fournit plus de 30 effets tels que "easeOutExpo", "easeOutBounce", etc. Vous pouvez cliquer ici pour voir l'effet de démonstration de chaque assouplissement, comme détaillé ci-dessous Présentez son utilisation et le diagramme de courbe de chaque assouplissement.

Comment utiliser jQuery easing

Tout d'abord, si vous devez utiliser des effets d'animation spéciaux dans votre projet, vous devez introduire jquery.easing.1.3.js après avoir introduit jQuery

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>

Après l'introduction, le paramètre d'assouplissement a les 32 valeurs facultatives suivantes :

1. swing linéaire
3.
5 . >13. faciliteOutQuint
14. faciliteInOutQuint
15. . faciliteInCirc
22.
30 .easyInBounce
31. easyOutBounce
32. easyInOutBounce

Bien sûr, il est généralement impossible d'utiliser autant d'effets dans un projet. Afin de réduire la redondance du code, vous ne le faites pas. nous devons introduire l'intégralité de jquery.easing si nécessaire. 1.3.js, nous pouvons mettre uniquement les plusieurs assouplissements dont nous avons besoin dans le fichier Javascript. Par exemple, si nous utilisons uniquement les deux effets "easeOutExpo" et "easeOutBounce" dans le projet, nous n'avons besoin que du code suivant


Utilisez la fonction d'animation personnalisée jQuery animate pour spécifier l'effet d'assouplissement, comme la personnalisation d'une animation de type printemps :


Il convient de mentionner que la méthode animate() dans la version jQuery 1.4. La méthode d'assouplissement a été étendue pour prendre en charge la spécification de la méthode d'assouplissement pour chaque attribut. Veuillez vous référer à ici pour plus de détails, tels que :


Utiliser jQuery intégré. fonctions d'animation telles que slideUp(), slideDown(), etc. pour spécifier l'effet d'assouplissement, les deux méthodes suivantes sont disponibles :


Diagramme d'assouplissement jQuery


Le diagramme d'assouplissement jQuery. Le diagramme suivant peut vous permettre de comprendre plus facilement l'effet de chaque assouplissement




Ce qui précède est les connaissances pertinentes que l'éditeur vous présente en détail sur la façon d'utiliser jQuery animate assouplissement. J'espère que cela vous sera utile. Si vous avez des questions, laissez-moi un message et l'éditeur vous répondra à temps. Je voudrais également vous remercier tous pour votre soutien au site Web PHP chinois !

Pour des explications graphiques et textuelles plus détaillées sur l'utilisation de jQuery animate easing, veuillez faire attention au site Web PHP chinois !