Exemples d'utilisation de la méthode queue() dans jQuery_jquery

L'exemple de cet article décrit l'utilisation de la méthode queue() dans jQuery. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Cette méthode peut afficher ou faire fonctionner la file d'attente de fonctions exécutée sur l'élément correspondant.

Cette méthode n'est peut-être pas utilisée trop fréquemment, mais elle est très importante. Voici un exemple de la façon d'utiliser cette méthode.
Les effets varient en fonction des paramètres de la méthode.
Remarque : Il est recommandé d'étudier avec la fonction dequeue().
Structure grammaticale 1 :

Copier le code Le code est le suivant :

$("selector").queue(queueName)

Liste des paramètres :

参数	描述
queueName	可选。 第一个匹配元素上动画队列的名称，默认值是“fx”。

Lorsqu'il n'y a pas de paramètres, il peut renvoyer la file d'attente d'animation sur le premier élément correspondant.

Exemple de code :

Copier le code Le code est le suivant :

Cliquez pour démarrer l'animation
Compter le nombre de fonctions dans la file d'attente

Puisque la fonction queue() n'a pas de paramètres, la valeur de retour est la file d'attente d'animation sur le premier élément correspondant, qui est la file d'attente d'animation de l'élément div. Lorsque vous cliquez sur le deuxième bouton, le numéro dans la file d'attente actuelle peut. être calculé en temps réel.

Grammaire 2 :

Copier le code Le code est le suivant :

$("selector").queue(callback())

Vous pouvez ajouter une fonction à la fin de la file d'attente des fonctions des éléments correspondants.

Liste des paramètres :

参数	描述
callback()	匹配元素上的函数队列最后面要添加的函数。

Dans l'exemple de Grammar 1, vous remarquerez peut-être un problème, c'est-à-dire que nous espérons ajouter les mots "animation terminée" au div une fois que toutes les animations sont terminées, mais à en juger par la performance réelle de l'opération, ce n'est pas le cas. . La raison principale est que les fonctions d'animation show() et animate() seront ajoutées par défaut à la file d'attente d'animation fx, et la méthode text() n'est pas une fonction d'animation, elle ne sera donc pas ajoutée à la file d'attente fx et. sera exécuté en premier. Ensuite, vous pouvez mettre la méthode text() en file d'attente en utilisant cette fonction.

Exemple de code :

Exemple 1 :

Copier le code Le code est le suivant :

Cliquez pour démarrer l'animation
Compter le nombre de fonctions dans la file d'attente

Le code ci-dessus permet d'obtenir l'effet final dont nous avons besoin.

Exemple 2 :

Copier le code Le code est le suivant :

Cliquez pour démarrer l'animation
Compter le nombre de fonctions dans la file d'attente

Dans le code ci-dessus, nous voulons exécuter une animation personnalisée après avoir exécuté la méthode text(), mais les performances ne sont pas comme ça et la dernière animation personnalisée n'est pas exécutée.
Le code est modifié comme suit :

Copier le code Le code est le suivant :

Cliquez pour démarrer l'animation
Compter le nombre de fonctions dans la file d'attente

Le code ci-dessus implémente nos exigences, ajoutez :

au code

Copier le code Le code est le suivant :

$(this).dequeue();

C'est-à-dire que lors de l'ajout d'une fonction via queue(), nous devons nous assurer que .dequeue() est finalement appelé afin que la prochaine fonction mise en file d'attente puisse être exécutée.

J'espère que cet article sera utile à la programmation jQuery de chacun.