jQuery dane - metoda queue()

Podręcznik referencyjny jQuery danych

Przykład

Wyświetl długość kolejki:

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

Spróbuj sam

Definicja i zastosowanie

queue() metoda wyświetla lub operuje na kolejce funkcji wykonywanych na dopasowanych elementach.

Gramatyka

.queue(queueName)
Parametry Opis
queueName Opcjonalne. Wartość ciągła, zawierająca nazwę sekwencji. Domyślnie jest to fx, standardowa sekwencja efektów.

Operacje na kolejce

queue() metoda operuje na kolejce funkcji wykonywanych na dopasowanych elementach.

Gramatyka

.queue(queueName,newQueue)
Parametry Opis
queueName Opcjonalne. Wartość ciągła, zawierająca nazwę sekwencji. Domyślnie jest to fx, standardowa sekwencja efektów.

Szczegółowe wyjaśnienie

Każdy element może mieć jedną lub kilka funkcji w kolejce dodanych przez jQuery. W większości aplikacji używa się tylko jednej kolejki (o nazwie fx). Kolejka wywołuje sekwencję działań asynchronicznie na elemencie, nie przerywając wykonywania programu. Przykładowo: wywołanie wielu metod animacji na elemencie.

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

Gdy to zdanie jest wykonywane, element natychmiast rozpoczyna swoją animację przesuwania, ale przejście rozjaśniania jest umieszczone w kolejce fx i zostanie wywołane tylko po zakończeniu animacji przesuwania.

Metoda .queue() pozwala nam bezpośrednio operować na tej kolejce funkcji. Wywołanie metody .queue() z funkcją zwrotną jest szczególnie przydatne; pozwala nam umieścić nową funkcję na końcu kolejki.

Ta cecha jest podobna do funkcji zwrotnych oferowanych przez metody animacji, ale nie wymaga ustawienia funkcji zwrotnej podczas wykonywania animacji.

$("#foo").slideUp();
$("#foo").queue(function() {
  alert('Animacja zakończona.');
  $("this").dequeue();
});;

Równoważne:

$("#foo").slideUp(function() {
  alert('Animacja zakończona.');
);

Proszę zauważyć, że gdy dodajemy funkcje za pomocą .queue(), powinniśmy upewnić się, że ostatecznie wywołaliśmy .dequeue(), aby następna funkcja w kolejce mogła być uruchomiona.

Przykład 1

Operacje kolejki na niestandardowych funkcjach:

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

Spróbuj sam

Przykład 2

Ustaw tablicę kolejki, aby usunąć ją z kolejki:

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

Spróbuj sam

Podręcznik referencyjny jQuery danych