queue Metodu

queue metodu, bir öğeye bağlı fonksiyon kuyruğu ile çalışmamızı sağlar. Ayrıca clearQueue metoduna da bakın, bu metod kuyruktaki henüz çalıştırılmamış tüm fonksiyonları silmemizi sağlar.

Sözdizimi

Bir öğeye bağlı çalıştırılacak fonksiyonların kuyruğunu bu şekilde görüntüleriz. İsteğe bağlı parametre olarak kuyruk adını bir dize olarak iletebilirsiniz (varsayılan fx - standart efekt kuyruğu):

.queue([kuyruk adı]);

Kuyruk üzerinde manipülasyon yapabiliriz. Öğe başına bir kez çalıştırılır. Bunun için ikinci parametre olarak mevcut kuyruğun içeriğini değiştirecek fonksiyon dizisini iletebiliriz:

.queue([kuyruk adı], yeni kuyruk );

Veya ikinci parametre olarak kuyruğa eklemek için yeni bir callback fonksiyonu iletebilirsiniz. Bu fonksiyon da sırasıyla parametre olarak başka bir fonksiyon alır. Bu, kuyruktaki sonraki öğeyi otomatik olarak kaldırmayı ve kuyruğu ilerletmeyi sağlar:

.queue([kuyruk adı], callback-fonksiyonu(next) {
	next();
});

Her öğenin bir veya daha fazla kuyruğu olabilir. Birçok uygulamada sadece bir tane (fx) kullanılır. Kuyruklar, program yürütmesini kesmeden, öğe üzerinde ardışık eylemleri asenkron olarak gerçekleştirmeyi sağlar. queue çağrısı bir callback fonksiyonu ile bize yeni bir fonksiyonu kuyruğun sonuna yerleştirmemizi sağlar. Callback fonksiyonu setteki her öğe için bir kez çalıştırılır. queue kullanarak bir fonksiyon eklerken, zincirdeki bir sonraki fonksiyonun çalışması için daha sonra dequeue metodunun çağrılacağından emin olmalıyız.

Örnek

Özel bir fonksiyon ekleyelim. İlk olarak, #animate'a tıklandıktan sonra, 2 saniye içinde sağa hareket edecek kırmızı bir kare göstereceğiz, ardından queue kullanarak kareyi yeşile boyayan, newcolor sınıfını ekleyen özel bir fonksiyon ekleyeceğiz. Gördüğünüz gibi, burada fonksiyonu kuyruktan çıkarmak için dequeue çağrılıyor. Ardından karemiz yarım saniye sola hareket edecek ve ikinci özel fonksiyonumuzla newcolor sınıfını kaldırarak tekrar kırmızıya dönecek. Animasyon sona erdiğinde karemizi küçültüp gizleyeceğiz:

<button id="animate">başlat</button>
<div></div>

div {
	position: absolute;
	margin: 3px;
	width: 50px;
	height: 50px;
	left: 0px;
	top: 30px;
	background: red;
	display: none;
}

div.newcolor {
	background: green;
}

$('#animate').click(function() {
	$('div')
		.show('slow')
		.animate({left: '+=200'}, 2000)
		.queue(function() {
			$(this).addClass('newcolor').dequeue();
		})
		.animate({left: '-=200'}, 500)
		.queue(function() {
			$(this).removeClass('newcolor').dequeue();
		})
		.slideUp();
});

Örnek

Öncekini silmek için dizi şeklinde bir kuyruk ekleyelim. #start düğmesine tıklandığında önceki örnekteki animasyonu göreceğiz. #stop düğmesine tıklandığında, boş bir dizi ekleyerek animasyonu durduracağız. #start'a tekrar tıklandığında animasyon baştan başlayacak:

<button id="start">başlat</button>
<button id="stop">durdur</button>
<div></div>

div {
	position: absolute;
	margin: 3px;
	width: 50px;
	height: 50px;
	left: 0px;
	top: 30px;
	background: red;
	display: none;
}
div.newcolor {
	background: green;
}

$('#start').click(function() {
	$('div')
		.show('slow')
		.animate({left: '+=200'}, 5000)
		.queue(function() {
			$(this).addClass('newcolor').dequeue();
		})
		.animate({left: '-=200'}, 1500)
		.queue(function() {
			$(this).removeClass('newcolor').dequeue();
		})
		.slideUp();
});
	
$('#stop').click(function() {
	$('div').queue('fx', []).stop();
});

Ayrıca Bakınız

animate metodu,
öğelerin özelliklerini canlandırır
clearQueue metodu,
kuyruktaki tüm henüz çalıştırılmamış öğeleri silmenizi sağlar
dequeue metodu,
kuyruktaki bir sonraki fonksiyonu çalıştırmanızı sağlar