jQuery veri - jQuery.queue() yöntemi
Örnek
Kuyruk uzunluğunu göster:
function showIt() { var n = div.queue("fx"); $("span").text( n.length ); setTimeout(showIt, 100); }
Tanım ve kullanım
queue() yöntemi, eşleşen elemanlar üzerinde çalışan fonksiyon kuyruğunu gösterir veya işlemektedir.
Yorum:Bu, alt düzey bir yöntemdir; .queue() Daha kolay.
Gramer
.queue(queueName)
Parametreler | Açıklama |
---|---|
queueName | Opsiyonel. Dizge değeri, dizge adını içerir. Varsayılan fx, standart etkileşim dizgesidir. |
Kuyruk işleme
queue() yöntemi, eşleşen elemanlar üzerinde çalışan fonksiyon kuyruğunu işlemektedir.
Gramer
.queue(queueName,newQueue)
Parametreler | Açıklama |
---|---|
queueName | Opsiyonel. Dizge değeri, dizge adını içerir. Varsayılan fx, standart etkileşim dizgesidir. |
Ayrıntılı açıklama
Her element, bir veya daha fazla jQuery tarafından eklenen fonksiyon kuyruğuna sahip olabilir. Çoğu uygulamada, sadece bir kuyruk (fx adında) kullanılır. Kuyruk, eleman üzerinde asenkron olarak eylem sırasını çağırır ve programın çalışmasını durdurmaz. Tipik örnek, eleman üzerindeki çok sayıda animasyon yöntemini çağırmaktır. Örneğin:
$('#foo').slideUp().fadeIn();
Bu satır çalıştığında, element hemen kaydırma animasyonuna başlar, ancak solma geçişi fx kuyruğuna yerleştirilir ve sadece kaydırma geçişi tamamlandıktan sonra çağrılır.
.queue() yöntemi, bu fonksiyon kuyruğuna doğrudan işlem yapmamıza olanak tanır. Geri çağrı fonksiyonlu .queue() yöntemleri çok kullanışlıdır; bu, kuyruk sonuna yeni bir fonksiyon eklememizi sağlar.
Bu özellik, animasyon yöntemleri tarafından sağlanan geri çağrı fonksiyonları ile benzerdir, ancak animasyon çalışırken geri çağrı fonksiyonu ayarlamak zorunda değilsiniz.
$('#foo').slideUp(); $('#foo').queue(function() { alert('Hareket tamamlanmıştır.'); $("this").dequeue(); });;
Eşdeğerdir:
$('#foo').slideUp(function() { alert('Hareket tamamlanmıştır.'); );
Lütfen dikkat edin, .queue() ile fonksiyon eklerken, .dequeue() çağrıldığından emin olmalıyız, böylece bir sonraki kuyruktaki fonksiyon çalışabilir.
Örnek 1
Özel fonksiyonlara kuyruk operasyonları yapın:
$("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(); );
Örnek 2
Kuyruğa eklenen dizileri ayarlayarak kuyruğu silmek için:
$("#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(); );