Метад 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">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();
});

Прыклад

Давайце дададзім чаргу ў выглядзе масіва, каб выдаліць попельную. Пры націску на кнопку #start мы будзем бачыць анімацыю з папярэдняга прыкладу. Пры націску на кнопку #stop мы будзем спыняць анімацыю шляхам дабаўлення пустога масіва. Пры паўторным націску на #start анімацыя будзе пачынацца нанова:

<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();
});

Глядзіце таксама

метад animate,
які анімуе ўласцівасці элементаў
метад clearQueue,
які дазваляе выдаліць усе невыкананыя элементы з чаргі функцый
метад dequeue,
які дазваляе выканаць наступную функцыю ў чарзе функцый