Exemple de tutoriel de la fonction queue() dans jQuery_jquery

Si l'objet jQuery actuel correspond à plusieurs éléments : lors de l'obtention de la file d'attente, obtenez uniquement la file d'attente sur le premier élément correspondant ; lors de la définition de la file d'attente (file d'attente de remplacement, fonction d'ajout), définissez-la séparément pour chaque élément correspondant.
Cette fonction appartient à un objet jQuery (instance). Si vous devez supprimer et exécuter la première fonction de la file d'attente, utilisez la fonction dequeue(). Vous pouvez également utiliser la fonction clearQueue() pour effacer la file d'attente spécifiée.

Grammaire
Cette fonction est nouvelle dans jQuery 1.2. La fonction queue() a les deux utilisations suivantes :

Utilisation 1 :

jQueryObject.queue( [ queueName ] [, newQueue ] )

Si aucun paramètre n'est spécifié ou si seul le paramètre queueName est spécifié, cela signifie obtenir la file d'attente de fonctions avec le nom spécifié. Si le paramètre newQueue est spécifié, cela signifie que la nouvelle file d'attente newQueue est utilisée pour définir (remplacer) tout le contenu de la file d'attente actuelle.

Utilisation 2 :

jQueryObject.queue( [ queueName ,] callback )

Ajoute la fonction spécifiée à la file d'attente spécifiée (fin).
Remarque : toutes les opérations de définition de la fonction queue() concernent chaque élément correspondant à l'objet jQuery actuel ; toutes les opérations de lecture concernent uniquement le premier élément correspondant.

Paramètres
Veuillez trouver les paramètres correspondants en fonction des noms de paramètres définis dans la section de syntaxe précédente.
queueName : facultatif/Nom de la file d'attente spécifié par le type de chaîne, par défaut "fx" (représentant la file d'attente des effets d'animation standard dans jQuery).
newQueue : facultatif/type Array. Une nouvelle file d'attente utilisée pour remplacer le contenu de la file d'attente actuelle.
rappel : la fonction spécifiée par Type de fonction sera ajoutée à la file d'attente. Cette fonction possède un paramètre de fonction appelé pour supprimer et exécuter la première fonction de la file d'attente.

Valeur de retour
La valeur de retour de la fonction queue() est de type Array/jQuery. Le type de la valeur de retour dépend si la fonction queue() actuelle effectue une opération get ou une opération set.
Si la fonction queue() effectue une opération de paramétrage (remplacement de la file d'attente, ajout d'une fonction), elle renvoie elle-même l'objet jQuery actuel, s'il s'agit d'une opération de récupération, elle renvoie la file d'attente de fonctions obtenue (tableau).
Si l'objet jQuery actuel correspond à plusieurs éléments, lors de la lecture des données, la fonction queue() utilise uniquement le premier élément correspondant.

Exemple :
1. jQuery nous fournit la fonction queue() pour insérer une partie du code dont vous avez besoin dans une file d'attente

$('#test-change1').toggle(function(){
  $('#test-object1').hide('slow').queue(function(next){
    $('#test-object1').appendTo($('#test-goal1'));
    next();
  }).show('slow');

},function(){
  $('#test-object1').hide('slow').queue(function(next){
    $('#test-object1').appendTo($('#test-origin1'));
    next();      
  }).show('slow');
});

2. File d'attente personnalisée

$("div").queue("custom", function(next) {
  $('div').css({'background':'red'});
  next();
});

Mais ce n'est que ce code. Lorsque vous l'ajoutez à la page Web et essayez de l'exécuter, vous constaterez que ce n'est pas "ce que vous voyez est ce que vous obtenez" et cela n'aura aucun effet.

Après modification :

$("div").queue("custom", function(next) {
  $('div').css({'background':'red'});
  next();
})
.dequeue("custom"); //this is the key

La définition générale de dequeue() est de "supprimer la fonction supérieure de la file d'attente et de l'exécuter". Je ne suis pas d'accord avec le mot "supprimer", mais je préfère "supprimer". En fait, la fonction de cette fonction est comme un pointeur vers la file d'attente dans une structure de données. Une fois la fonction précédente de la file d'attente exécutée, la dernière. la fonction de la file d'attente est supprimée.

3. file d'attente : faux

$("#object")
.delay(1000, "fader")
.queue("fader", function(next) {
  $(this).animate({opacity: 0},
    {duration: 1000, queue: false});
  next();
})
.dequeue("fader")
.animate({top: "-=40"}, {duration: 2000})

Dans les 1000 premières millisecondes, seule la file d'attente "fx" qui contrôle la hauteur est exécutée, puis dans les 1000 millisecondes suivantes, la file d'attente "fader" qui contrôle l'opacité et le "fx" qui contrôle la hauteur sont exécutés. en parallèle. Le parallélisme ici est queue:false

$('#section3a').slideUp(1000)
      .slideDown(1000)
      .animate({width: '50px'}, {duration: 1000, queue: false});

4. Obtenez la longueur de la file d'attente
Par exemple, utilisez le nom de la file d'attente pour obtenir la longueur de l'élément correspondant :

var $queue=$("div").queue('fx');

Évidemment, récupérez la file d'attente nommée 'fx'. Si vous souhaitez obtenir la longueur :

var $length=$('div').queue('fx').length;

Notez que la longueur de la file d'attente ici est uniquement la longueur de la file d'attente de l'élément correspondant qui n'a pas encore été exécuté. Lorsque l'animation est terminée, la longueur de la file d'attente sera automatiquement réduite à 0

.

5. File d'attente de remplacement

$('div').queue('fx',function(){
    $('div').slideDown('slow')
         .slideUp('slow')
         .animate({left:'+=100'},4000);
});//定义fx
$('div').queue('fx2',function(){
    $('div').slideDown('fast')
         .slideUp('fast')
         .animate({left:'+=100'},1000);
});//定义fx2

Deux files d'attente sont définies ici, l'une est la file d'attente lente, qui est la file d'attente par défaut 'fx', et l'autre est la file d'attente rapide 'fx2'

Lorsqu'un bouton est cliqué :

$('input').click(function(){
  $('div').queue('fx',fx2);
});