jQuery Données - Méthode jQuery.queue()

Exemple

Afficher la longueur de la file :

function showIt() {
  var n = div.queue("fx");
  $("span").text( n.length );      
  setTimeout(showIt, 100);
}

Essayer par vous-même

Définition et utilisation

La méthode queue() affiche ou opère sur la file de fonctions exécutées sur les éléments correspondants.

Remarque :C'est une méthode de niveau inférieur ; utilisez .queue() Plus pratique.

Syntaxe

.queue(queueName)
Paramètres Description
queueName Optionnel. Valeur de chaîne contenant le nom de la séquence. Par défaut, c'est fx, la séquence d'effets standard.

Opérations sur la file

La méthode queue() opère sur la file de fonctions exécutées sur les éléments correspondants.

Syntaxe

.queue(queueName,newQueue)
Paramètres Description
queueName Optionnel. Valeur de chaîne contenant le nom de la séquence. Par défaut, c'est fx, la séquence d'effets standard.

Explication détaillée

Chaque élément peut posséder une à plusieurs files de fonctions ajoutées par jQuery. Dans la plupart des applications, seule une file est utilisée (nommée fx). La file exécute asynchrément une séquence d'actions sur l'élément sans interrompre l'exécution du programme. Un exemple typique est l'appel de plusieurs méthodes d'animation sur un élément. Par exemple :

$('#foo').slideUp().fadeIn();

Lorsque cette instruction est exécutée, l'élément commence immédiatement son animation glissante, mais la transition d'effet d'apparition est placée dans la file fx et ne sera appelée qu'après la fin de la transition glissante.

La méthode .queue() nous permet de manipuler directement cette file de fonctions. L'appel de .queue() avec une fonction de rappel est particulièrement utile ; il nous permet de placer une nouvelle fonction à la fin de la file.

Cette fonctionnalité est similaire à la fourniture de fonctions de rappel par les méthodes d'animation, mais sans avoir à définir un rappel pendant l'exécution de l'animation.

$('#foo').slideUp();
$('#foo').queue(function() {
  alert('Animation terminée.');
  $(this).dequeue();
});;

Équivalent à :

$('#foo').slideUp(function() {
  alert('Animation terminée.');
);

Veuillez noter que lorsque vous ajoutez des fonctions via .queue(), nous devons nous assurer que .dequeue() est appelé en dernier, afin que la prochaine fonction en file puisse être exécutée.

Exemple 1

Effectuer des opérations en file sur une fonction personnalisée :

$("document.body").click(function () {
  $("div").show("slow");
  $("div").animate({left:'+=200'},2000);
  $("div").queue(function () {
    $(this).addClass("newcolor");
    $(this).dequeue();
  });;
  $("div").animate({left:'-=200'},500);
  $("div").queue(function () {
    $(this).removeClass("newcolor");
    $(this).dequeue();
  });;
  $("div").slideUp();
);

Essayer par vous-même

Exemple 2

Définir un tableau de file pour supprimer la file :

$("#start").click(function () {
  $("div").show("slow");
  $("div").animate({left:'+=200'},5000);
  $("div").queue(function () {
    $(this).addClass("newcolor");
    $(this).dequeue();
  );
  $("div").animate({left:'-=200'},1500);
  $("div").queue(function () {
    $(this).removeClass("newcolor");
    $(this).dequeue();
  );
  $("div").slideUp();
);
$("#stop").click(function () {
  $("div").queue("fx", []);
  $("div").stop();
);

Essayer par vous-même