jQuery dati - metodo queue()

Manuale di riferimento dei dati jQuery

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

queue() metodo mostra o opera la coda di funzioni eseguite sugli elementi abbinati.

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

queue() metodo opera la coda di funzioni eseguite sugli elementi abbinati.

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 dissolvenza viene messa 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 posizionare una nuova funzione alla fine della coda.

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

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

Uguale a:

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

Notare che quando si aggiungono funzioni tramite .queue(), dobbiamo assicurarci che alla fine venga chiamata .dequeue(), 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 rimuovere 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 dei dati jQuery