Metod queue

queue metodi bizga elementga bog‘langan funktsiyalar navbati bilan ishlash imkonini beradi. Shuningdek, clearQueue metodiga qarang, bu metod bizga ishga tushirilmagan barcha funktsiyalarni navbatdan olib tashlash imkonini beradi.

Sintaksis

Biz elementga bog‘langan bajariladigan funktsiyalar navbatini shu tarzda ko‘rsatamiz. Ixtiyoriy parametr sifatida satr shaklida navbat nomini berish mumkin (standart bo‘yicha fx - standart effektlar navbati):

.queue([navbat nomi]);

Biz navbatni boshqarishimiz mumkin. Har bir element uchun bir marta bajariladi. Buning uchun ikkinchi parametr sifatida joriy navbat mazmunini almashtiradigan funktsiyalar massivini berish mumkin:

.queue([navbat nomi], yangi navbat );

Yoki ikkinchi parametr sifatida navbatga qo‘shish uchun yangi callback-funktsiyani berish mumkin. Bu funktsiya o‘z navbatida parametr sifatida boshqa funktsiyani oladi. Bu navbatdagi keyingi elementni avtomatik ravishda olib tashlash va navbatni harakatlantirish imkonini beradi:

.queue([navbat nomi], callback-funktsiya(next) {
	next();
});

Har bir elementda bir yoki bir nechta navbat bo‘lishi mumkin. Ko‘pgina dasturlarda faqat bitta (fx) ishlatiladi. Navbatlar element bilan amallarni ketma-ketlikda asinxron ravishda, dastur bajarilishini to‘xtatmasdan amalga oshirish imkonini beradi. queue ni callback-funktsiya bilan chaqirish bizga yangi funktsiyani navbat oxiriga qo‘yish imkonini beradi. Callback-funktsiya to‘plamdagi har bir element uchun bir marta bajariladi. queue yordamida funktsiya qo‘shganda, biz keyinroq dequeue metodi chaqirilishiga ishonch hosil qilishimiz kerak, zanjirdagi keyingi funktsiya ishlashi uchun.

Misol

Keling, foydalanuvchi funktsiyasini qo‘shamiz. Birinchi navbatda, #animate ni bosgandan so‘ng, biz 2s davomida o‘ngga harakatlanadigan qizil kvadratni ko‘rsatamiz, keyin queue yordamida biz kvadratni yashil rangga bo‘yaydigan, newcolor classini qo‘shadigan foydalanuvchi funktsiyasini qo‘shamiz. Ko‘rib turganingizdek, keyin bu yerda funktsiyani navbatdan olib tashlash uchun dequeue chaqiriladi. Keyin bizning kvadratimiz yarim soniya chapga harakatlanadi va qizil rangga qaytadi - biz newcolor classini olib tashlaydigan ikkinchi foydalanuvchi funktsiyasi yordamida. Animatsiya tugagach, biz kvadratimizni yig‘amiz:

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

Misol

Keling, oldingisini olib tashlash uchun massiv shaklida navbat qo‘shamiz. #start tugmasini bosganda, biz oldingi misoldagi animatsiyani ko‘ramiz. #stop tugmasini bosganda, biz bo‘sh massiv qo‘shish orqali animatsiyani to‘xtatamiz. #start ni qayta bosganda animatsiya qaytadan boshlanadi:

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

Shuningdek qarang

animate metodi,
elementlar xususiyatlarini animatsiya qiladi
clearQueue metodi,
funktsiyalar navbatidan bajarilmagan elementlarni olib tashlash imkonini beradi
dequeue metodi,
funktsiyalar navbatidagi keyingi funktsiyani bajarish imkonini beradi