Explication détaillée des exemples d'utilisation de la fonction queue() dans jQuery

Cet article présente principalement l'exemple de didacticiel de la fonction queue() dans jQuery. La fonction queue() facilite l'opération de contrôle de séquence d'exécution de la fonction JavaScript. besoin Les amis peuvent se référer à

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), chaque élément correspondant ; sont réglés individuellement.
Cette fonction appartient à l'objet (instance) jQuery. 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.

Syntaxe
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 fonction file d'attente 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 )

Ajouter la fonction spécifiée à la file d'attente spécifiée (fin).
Remarque : toutes les opérations de configuration 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 retrouver 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 file d'attente spécifié par le type String, la valeur par défaut est "fx" (représentant la file d'attente d'effets d'animation standard dans jQuery).
newQueue : le type Facultatif/Array est utilisé pour remplacer le nouveau 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 a un paramètre de fonction, qui peut être appelé pour supprimer et exécuter la première fonction de la file d'attente.

Valeur de retour
queue()La valeur de retour de la fonction est de type Array/jQuery. Le type de valeur de retour dépend de la file d'attente actuelle. () est en cours d'exécution.
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

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

Mais c'est tout. Lorsque vous l'ajoutez réellement à la page Web et essayez de l'exécuter, vous constaterez que ce n'est pas « ce que vous voyez est ce que vous voyez. obtenir ». Cela n'aura aucun effet.

Modifié :

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

La définition générale de dequeue() est "supprimer la fonction supérieure de la file d'attente et 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 : false

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

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

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

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

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

Très évidemment, il s'agit d'obtenir la file d'attente avec le nom de file d'attente 'fx'. Si vous souhaitez obtenir la longueur :

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

Notez que la longueur de la file d'attente ici n'est que la file d'attente. longueur de l'élément correspondant qui n'a pas encore été exécuté. Une fois l'animation terminée, la file d'attente La longueur sera automatiquement classée comme 0

File d'attente de remplacement

<🎜. >

$('p').queue('fx',function(){
    $('p').slideDown('slow')
         .slideUp('slow')
         .animate({left:'+=100'},4000);
});//定义fx
$('p').queue('fx2',function(){
    $('p').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', l'autre est la file d'attente rapide 'fx2'

Lorsqu'un bouton est cliqué :

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!