queue әдісі

queue әдісі бізге элементке байланған функциялар кезегімен жұмыс істеуге мүмкіндік береді. Сонымен қатар clearQueue әдісіне де назар аударыңыз, ол бізге әлі іске қосылмаған барлық функцияларды кезектен шығаруға мүмкіндік береді.

Синтаксис

Біз элементке байланған орындалатын функциялар кезегін көрсетеміз. Қосымша параметр ретінде кезек атауын жол түрінде беруге болады (әдепкі бойынша fx - стандартты эффектілер кезегі):

.queue([кезек атауы]);

Біз кезекті басқара аламыз. Әр элемент үшін бір рет орындалады. Ол үшін екінші параметр ретінде ағымдағы кезектің мазмұнын ауыстыратын функциялар массивін беруге болады:

.queue([кезек атауы], жаңа кезек );

Немесе екінші параметр ретінде кезекке қосылатын жаңа callback-функцияны беруге болады. Бұл функция өз кезегінде параметр ретінде басқа функцияны алады. Бұл кезектегі келесі элементті автоматты түрде шығаруға және кезекті жылжытуға мүмкіндік береді:

.queue([кезек атауы], callback-функция(next) {
	next();
});

Әр элементтің бір немесе бірнеше кезегі болуы мүмкін. Көптеген қолданбаларда тек бір ғана (fx) қолданылады. Кезектер элементпен әрекеттер тізбегін бағдарламаның орындалуын үзбей, асинхронды түрде жүзеге асыруға мүмкіндік береді. queue шалуы callback-функциясымен бізге жаңа функцияны кезек соңына қоюға мүмкіндік береді. callback-функция жиынтықтағы әр элемент үшін бір рет орындалады. queue көмегімен функцияны қосқан кезде, біз кейіннен dequeue әдісі шақырылатынына көз жеткізуіміз керек, тізбектегі келесі функцияның жұмыс істеуі үшін.

Мысал

Пайдаланушы функциясын қосамыз. Алдымен, #animate басқаннан кейін, біз қызыл шаршыны көрсетеміз, ол 2с бойы оңға қарай жылжиды, содан кейін queue көмегімен біз шаршыны жасыл түске бояйтын пайдаланушы функциясын қосамыз, newcolor класын қосу арқылы. Көріп отырғаныңыздай, содан кейін мұнда кезектен функцияны шығару үшін dequeue шақырылады. Содан кейін біздің шаршы жарты секунд бойы солға қарай жылжиды және қызыл түске оралады - екінші пайдаланушы функциясының көмегімен біз newcolor класын алып тастаймыз. Анимация аяқталғаннан кейін біз шаршыны жинаймыз:

<button id="animate">бастау</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();
});

Мысал

Алдыңғыны жою үшін массив түрінде кезек қосамыз. #start батырмасын басқан кезде біз алдыңғы мысалдағы анимацияны көреміз. #stop батырмасын басқан кезде біз анимацияны тоқтатамыз, бос массив қосу арқылы. Қайтадан #start басқан кезде анимация қайтадан басталады:

<button id="start">бастау</button>
<button id="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();
});

Сондай-ақ қараңыз

animate әдісі,
элементтердің қасиеттерін анимациялайды
clearQueue әдісі,
функциялар кезегінен орындалмаған барлық элементтерді шығаруға мүмкіндік береді
dequeue әдісі,
функциялар кезегіндегі келесі функцияны орындауға мүмкіндік береді