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 методу,
ал функциялардын кезегиндеги кийинки функцияны аткарууга мүмкүндүк берет