jQuery - méthode queue()

Manuel de données jQuery

Exemple

Afficher la longueur de la file :

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

Essayez-le 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.

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, une seule file est utilisée (nommée fx). La file exécute de manière asynchrone 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 de fondu est placée dans la file fx et ne sera appelée que lorsque la transition glissante est terminée.

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 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 devoir définir de fonctions de rappel pendant l'exécution de l'animation.

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

C'est équivalent à :

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

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

Exemple 1

Effectuer des opérations de 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();
);

Essayez-le 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();
);

Essayez-le vous-même

Manuel de données jQuery