jQuery-Daten - jQuery.queue() -Methode

jQuery Datenreferenzhandbuch

Beispiel

Zeige die Länge der Liste:

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 dem passenden Element ausgeführt wird.

Anmerkung:Dies ist ein untergeordneter Methoden; verwenden Sie .queue() Noch bequemer.

Syntax

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

Listenaufgaben

Die queue() -Methode operiert mit der Funktionsliste, die auf dem passenden Element ausgeführt wird.

Syntax

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

Detaillierte Erklärung

Jeder Element kann eine bis mehrere von jQuery hinzugefügte Funktionslisten haben. In den meisten Anwendungen wird nur eine Liste (benannt als 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 Schiebewechsel-Animation, aber die Einblend过渡被 in die fx-Warteschlange gestellt und wird nur aufgerufen, wenn die Schiebewechsel-Animation abgeschlossen ist.

Die .queue()-Methode ermöglicht es uns, direkt mit der Funktionswarteschlange umzugehen. 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 ähnelt der Bereitstellung von Callback-Funktionen durch Animationsmethoden, 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 in der Warteschlange befindliche Funktion ausgeführt wird.

Beispiel 1

Führen Sie Queue-Operationen 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

Stellen Sie die Warteschlange-Array ein, um die Warteschlange zu löschen:

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