jQuery-Daten - queue() -Methode

jQuery Datenreferenzhandbuch

Beispiel

Zeige die Länge der Queue:

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

Versuchen Sie es selbst

Definition und Verwendung

Die queue() -Methode zeigt oder operiert mit der Funktionsliste, die auf den übereinstimmenden Elementen ausgeführt wird.

Syntax

.queue(queueName)
Parameter Beschreibung
queueName Optional. Zeichenfolgenwert, der den Namen der Sequenz enthält. Standardmäßig ist dies fx, die Standardwirkungsserie.

Queue-Operation

Die queue() -Methode operiert mit der Funktionsliste, die auf den übereinstimmenden Elementen ausgeführt wird.

Syntax

.queue(queueName,newQueue)
Parameter Beschreibung
queueName Optional. Zeichenfolgenwert, der den Namen der Sequenz enthält. Standardmäßig ist dies fx, die Standardwirkungsserie.

Detaillierte Erklärung

Jeder Element kann eine oder mehrere von jQuery hinzugefügte Funktionslisten haben. In den meisten Anwendungen wird nur eine Liste (benannt fx) verwendet. Die Liste ruft asynchron eine Reihe von Aktionen auf dem Element auf, ohne die Ausführung des Programms zu beenden. Ein typisches Beispiel ist der Aufruf mehrerer Animationsmethoden auf dem Element. Zum Beispiel:

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

Wenn dieses Statement ausgeführt wird, beginnt das Element sofort seine gleitende Animation, aber der Einblenden-Übergang wird in die fx-Warteschlange gestellt und wird nur aufgerufen, wenn die gleitende Übergang abgeschlossen ist.

Die .queue() -Methode ermöglicht es uns, direkt auf diese Funktionswarteschlange zuzugreifen. Der Aufruf einer .queue() -Methode mit Callback-Funktion ist besonders nützlich; er ermöglicht es uns, eine neue Funktion am Ende der Warteschlange hinzuzufügen.

Diese Eigenschaft ist ähnlich wie die Callback-Funktionen, die von den Animationsmethoden bereitgestellt werden, aber es ist nicht erforderlich, eine Callback-Funktion während der Animation festzulegen.

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

Äquivalent zu:

$('#foo').slideUp(function() {
  alert('Animation abgeschlossen.');
);

Beachten Sie, dass wir sicherstellen sollten, dass .dequeue() am Ende aufgerufen wird, damit der nächste Funktion in der Warteschlange ausgeführt werden kann.

Beispiel 1

Führen Sie eine Warteschlangenoperation für benutzerdefinierte Funktionen durch:

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

Versuchen Sie es selbst

Beispiel 2

Legen Sie die Warteschlangenarray zum Entfernen der Warteschlange fest:

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

Versuchen Sie es selbst

jQuery Datenreferenzhandbuch