Metod queue

Metod queue bizə elemente bağlanmış funksiyalar novbesi ile işlemeye imkan verir. Həmçinin bax metod clearQueue, hansı ki, bizə novbeden işe düşmemiş bütün funksiyaları silmeğe imkan verir.

Sintaksis

Beləliklə, biz elemente bağlanmış icra olunan funksiyaların novbesini göstəririk. İsteğe bağlı parametr kimi novbenin adını setir şəklinde ilete bilərik (defolt olaraq fx - standart effektler novbesi):

.queue([novbenin adı]);

Biz novbe ile manipulyasiya ede bilərik. Bir defe icra olunur hər bir element üçün. Bunun üçün ikinci parametr kimi verile bilər funksiyalar massivi, hansı ki, cari novbenin mezmununu deyişecek:

.queue([novbenin adı], yeni novbe );

Və ya ikinci parametr kimi novbeye elave etmek üçün yeni callback-funksiya ilete bilərik. Bu funksiya öz növbəsinde parametr kimi başqa bir funksiya alır. Bu imkan verir novbeden sonrakı elementi avtomatik silmeye ve novbeni herekete getirmeye:

.queue([novbenin adı], callback-funksiya(next) {
	next();
});

Hər bir elementin bir ve ya bir neçe novbesi ola bilər. Bir çox proqramlarda yalnız birinden (fx) istifade olunur. Novbeler elementle ardıcıl hereketlerin yerine yetirilmesine imkan verir asinxron şəkildə, proqramın icrasını kəsmədən. queue çağırışı callback-funksiya ile bizə yeni funksiyanı novbenin sonuna yerləşdirməyə imkan verir. callback-funksiya çoxluqdakı hər bir element üçün bir defe icra olunur. queue ile funksiya elave ederken, biz əmin olmalıyıq ki, sonra çağırılacaq metod dequeue, zəncirdəki sonrakı funksiyanın işe düşmesi üçün.

Nümunə

Gəlin fərdi funksiya elave edək. Əvvəlcə, #animate üzerine klikledikden sonra, biz qırmızı kvadrat göstərəcəyik, hansı ki, 2s erzinde sağa hereket edecek, sonra isə queue köməyi ile biz elave edəcəyik fərdi funksiya, hansı ki, kvadratı yaşıl rəngə boyayacaq, newcolor klassi elave etmekle. Gördüyünüz kimi, sonra burada çağırılır dequeue, funksiyanı novbeden silmek üçün. Sonra bizim kvadrat yarım saniyə erzinde sola hereket edecek ve geri qırmızıya boyanacaq - ikinci fərdi funksiyanın köməyi ile biz çıxardırıq newcolor klassi. Animasiya bitdikden sonra biz kvadratı kiçildirik:

<button id="animate">start</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();
});

Nümunə

Gəlin əvvəlkini silmek üçün massiv şəklinde novbe elave edək. #start düyməsinə klikleyerken biz əvvəlki nümunədəki animasiyanı görəcəyik. #stop düyməsinə klikleyerken biz animasiyanı dayandıracıq boş massiv elave etmekle. Yeniden #start üzerine klikleyerken animasiya yeniden başlayacaq:

<button id="start">start</button>
<button id="stop">stop</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();
});

Həmçinin bax

metod animate,
hansı ki, elementlerin xasselerini canlandırır
metod clearQueue,
hansı ki, funksiyalar novbesinden icra olunmamış elementleri silməyə imkan verir
metod dequeue,
hansı ki, funksiyalar novbesinde sonrakı funksiyanı icra etməyə imkan verir