Étude approfondie de jQuery Animate (1)

Le contenu de cet article concerne l'apprentissage approfondi d'Animate dans jQuery (1), afin que vous puissiez mieux comprendre l'utilisation d'Animate dans jQuery. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Que savez-vous de l’utilisation d’animate dans jQuery ? S'il ne s'agit que d'un simple changement de position, montrez et cachez, oh ! Oh mon Dieu, vous gaspillez des ressources ! Parce que l’animation est si puissante, vous pouvez l’utiliser de nombreuses manières inattendues ! Étudions-le ensemble. [Tutoriels vidéo associés recommandés : Tutoriel jQuery]

Tout d’abord, vous devez comprendre l’utilisation détaillée d’animate dans l’API jQuery.

animate : Renvoie l'objet jQuery

animate( properties [, duration ] [, easing ] [, complete ] )

Description : Effectue une animation personnalisée basée sur un ensemble de propriétés CSS.

1. animer (propriétés [, durée ] [, assouplissement ] [, complet ] )

1. Propriétés

Type : PlainObject

Un objet de propriétés et de valeurs CSS, l'animation se déplacera en fonction de cet ensemble d'objets.

2. durée (par défaut : 400)

Type : Nombre ou chaîne

Une chaîne ou un nombre détermine la durée d'exécution de l'animation. (Valeur par défaut : "normal", chaîne "lent", "normal" ou "rapide" ou valeur en millisecondes indiquant la durée de l'animation (telle que : 1000))

assouplissement (par défaut : swing)< 🎜. >

Type : String

Une chaîne indiquant la fonction d'assouplissement à utiliser pour la transition. (jQuery lui-même fournit "linéaire" et "swing")

4. complet

Type : Function()

Fonction exécutée lorsque l'animation est terminée.

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

1. Propriétés

Type : PlainObject

Un objet de propriétés et de valeurs CSS L'animation se déplacera en fonction de cet ensemble d'objets.

2,

options

Type : PlainObject

Un ensemble de valeurs contenant des options d'animation. Options prises en charge :

1), durée (par défaut : 400)

Type : Nombre ou chaîne

Une chaîne ou un nombre détermine la durée pendant laquelle l'animation sera exécutée. (Remarque de Fool's Pier : valeur par défaut : "normal", trois chaînes de vitesse prédéterminées ("lent", "normal" ou "rapide") ou une valeur en millisecondes indiquant la durée de l'animation (telle que : 1000))

2), assouplissement (par défaut : swing)

Type : String

Une chaîne indiquant la fonction d'assouplissement à utiliser pour la transition. (Remarque de Fool's Wharf : jQuery lui-même fournit "linéaire" et "swing", et d'autres effets peuvent utiliser le plugin jQuery Easing)

3),

file d'attente ( par défaut : true)

Type : Booléen ou Chaîne

Une valeur booléenne indiquant s'il faut placer l'animation dans la file d'attente des effets. Si faux, l'animation démarrera immédiatement. À partir de jQuery 1.7, l'option queue peut également accepter une chaîne, auquel cas l'animation est ajoutée à la file d'attente représentée par cette chaîne. Lorsqu'un nom de file d'attente personnalisé est utilisé, l'animation ne démarre pas automatiquement ; vous devez appeler .dequeue("queuename") pour la démarrer.

4), specialEasing

Type : PlainObject

Une ou plusieurs propriétés CSS définies par les propriétés du premier paramètre de cette méthode, et sa fonction d'assouplissement correspondante Une carte de clés- paires de valeurs. (Nouveau en 1.4)

5),

étape

Type : Fonction (Numéro maintenant, Tween tween)

Chaque La fonction qui sera appelée pour chaque propriété animée d'un élément animé. Cette fonction offre la possibilité de modifier l'objet Tween pour changer les valeurs des propriétés dans les paramètres.

6),

progression

Type : Fonction (Animation de promesse, Progression du nombre, Nombre de Mmes restantes)

Animation pour chacun step Une fonction appelée à la fin, exécutant une fonction distincte pour chaque élément animé, quel que soit le nombre de propriétés d'animation. (version ajoutée : 1.8)

7), complète

Type : Fonction()

Fonction exécutée lorsque l'animation est terminée.

8), done

Type : Fonction (Animation promise, Boolean jumpedToEnd )

Fonction exécutée lorsque l'animation est terminée. (Son statut d'objet Promise est terminé). (version ajoutée : 1.8)

9), échec

Type : Fonction (animation Promise, Boolean jumpedToEnd)

l'animation a échoué Fonction à exécuter une fois terminée. (Son statut d'objet Promesse est incomplet). (version ajoutée : 1.8)

10), toujours

Type : Fonction (Animation promise, Boolean jumpedToEnd)

Exécuté lorsque l'animation est terminée ou arrêtée lorsqu'elle ne l'est pas fonction terminée. (Son statut d'objet Promesse est terminé ou incomplet). (version ajoutée : 1.8)

Pour certaines applications de base, vous pouvez vous référer à l'API jQuery ou à l'API jQuery chinoise.

La partie orange est ce sur quoi je souhaite me concentrer dans cet article !

PlainObject

PlainObject类型，是Javascript对象包含0个或者跟多键值对。换句话说，PlainObject也是Object对象。但在jQuery文档中，被设计是为了区分其他多种Javascript对象。如null,用户自定义的数组，或者是主机对象向如document,typeof 值都是 “object”。通过jQuery.isPlainObject()方法来判断传入的的参数是否是PlainObject.

var a = [];
var d = document;
var o = {};
 
typeof a; // object
typeof d; // object
typeof o; // object
 
jQuery.isPlainObject( a ); // false
jQuery.isPlainObject( d ); // false
jQuery.isPlainObject( o ); // true

queue

一个布尔值，指示是否将动画放置在效果队列中。如果为false时，将立即开始动画。

它是来决定不同动画进行的顺序。

$( "#block1" ).animate( { width: "90%" }, { queue: false, duration: 3000 })
     .animate({ fontSize: "24px" }, 1500 )
     .animate({ borderRightWidth: "15px" }, 1500 );
 $( "#block2" ).animate({ width: "90%" }, 1000 )
     .animate({ fontSize: "24px" }, 1000 )
     .animate({ borderLeftWidth: "15px" }, 1000 );

#block1要执行的动画中，使用了 queue: false 选项，该动画使元素的宽度扩大到了总宽 90%,并且 文字大小也变大了。一旦字体大小改变完了，边框的动画就会开始。注意到是并且了吗？是同时进行的~~

#block2要执行的动画中，包含了一系列动画，当前一个动画完成时，后一个动画就会开始。

关于 step 就留到下次在讲解吧！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!