jQuery dane - jQuery.queue() metoda
Przykład
Wyświetl długość kolejki:
function showIt() { var n = div.queue("fx"); $("span").text( n.length ); setTimeout(showIt, 100); }
Definicja i użycie
queue() metoda wyświetla lub operuje na funkcji kolejki wykonywanej na pasującym elemencie.
Komentarz:To metoda niskiego poziomu; używa się .queue() Bardziej wygodne.
Gramatyka
.queue(queueName)
Parametry | Opis |
---|---|
queueName | Opcjonalne. Wartość ciągła znaków, zawierająca nazwę sekwencji. Domyślnie jest fx, standardowa sekwencja efektów. |
Operacje na kolejce
queue() metoda operuje na funkcji kolejki wykonywanej na pasującym elemencie.
Gramatyka
.queue(queueName,newQueue)
Parametry | Opis |
---|---|
queueName | Opcjonalne. Wartość ciągła znaków, zawierająca nazwę sekwencji. Domyślnie jest fx, standardowa sekwencja efektów. |
Szczegółowe wyjaśnienie
Każdy element może mieć do jednej lub kilku funkcji kolejki 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 kończąc wykonywania programu. Przykładowo: wywołanie wielu metod animacji na elemencie.
$('#foo').slideUp().fadeIn();
当这条语句执行时,元素会立即开始其滑动动画,但是淡入过渡被置于 fx 队列,只有当滑动过渡完成后才会被调用。
.queue() 方法允许我们直接对这个函数队列进行操作。调用带有回调函数的 .queue() 方法特别有用;它允许我们在队列末端放置一个新函数。
这个特性与动画方法提供回调函数类似,但是无需在动画执行时设置回调函数。
$('#foo').slideUp(); $('#foo').queue(function() { alert('Animation complete.'); $(this).dequeue(); });;
等价于:
$('#foo').slideUp(function() { alert('Animation complete.'); );
请注意,当通过 .queue() 添加函数时,我们应当确保最终调用了 .dequeue(),这样下一个排队的函数才能执行。
例子 1
对自定义函数进行队列操作:
$(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(); );
例子 2
设置队列数组来删除队列:
$("#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(); );