jQuery Dati - Il metodo jQuery.queue()

Manuale di riferimento jQuery per i dati

Esempio

Mostra la lunghezza della coda:

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

Prova personalmente

Definizione e uso

Il metodo queue() mostra o gestisce la coda delle funzioni eseguite sugli elementi corrispondenti.

Nota:Questo è un metodo di livello basso; utilizzare .queue() Più comodo.

Sintassi

.queue(queueName)
Parametro Descrizione
queueName Opzionale. Valore di stringa che contiene il nome della sequenza. Predefinito è fx, la sequenza di effetti standard.

Operazioni sulla coda

Il metodo queue() gestisce la coda delle funzioni eseguite sugli elementi corrispondenti.

Sintassi

.queue(queueName,newQueue)
Parametro Descrizione
queueName Opzionale. Valore di stringa che contiene il nome della sequenza. Predefinito è fx, la sequenza di effetti standard.

Spiegazione dettagliata

Ogni elemento può avere una o più code di funzioni aggiunte da jQuery. Nella maggior parte delle applicazioni, viene utilizzata una sola coda (chiamata fx). La coda esegue asincronamente una sequenza di azioni sull'elemento senza interrompere l'esecuzione del programma. Esempio tipico è il chiamare più metodi di animazione sull'elemento. Ad esempio:

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

Quando questa istruzione viene eseguita, l'elemento inizia immediatamente la sua animazione di scorrimento, ma la transizione di sfumatura viene posta nella coda fx e viene chiamata solo dopo che la transizione di scorrimento è completata.

Il metodo .queue() ci permette di operare direttamente sulla coda di funzioni. Chiamare un metodo .queue() con callback è particolarmente utile; permette di inserire una nuova funzione alla fine della coda.

Questa funzionalità è simile a quella fornita dai metodi di animazione con callback, ma non è necessario impostare un callback durante l'esecuzione dell'animazione.

$('#foo').slideUp();
$('#foo').queue(function() {
  alert('Animatione completata.');
  $("this").dequeue();
});;

Uguale a:

$('#foo').slideUp(function() {
  alert('Animatione completata.');
);

Attenzione, quando si aggiungono funzioni tramite .queue(), dobbiamo assicurarci che venga chiamata .dequeue() alla fine, in modo che la prossima funzione in coda possa essere eseguita.

Esempio 1

Esegui operazioni di coda su funzioni personalizzate:

$("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();
);

Prova personalmente

Esempio 2

Imposta l'array della coda per eliminare la coda:

$("#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();
);

Prova personalmente

Manuale di riferimento jQuery per i dati