Методот queue

Методот queue ни овозможува да работиме со редот на функции врзани за елемент. Погледнете го и методот clearQueue, кој ни овозможува да отстраниме од редот сите функции кои не се пуштени во извршување.

Синтакса

Вака го прикажуваме редот на функции што се извршуваат, врзани за елемент. Може да се пренесе незадолжителен параметар за името на редот во вид на стринг (по стандард fx - стандардниот ред на ефекти):

.queue([име на ред]);

Можеме да манипулираме со редот. Се извршува еднаш за секој елемент. За ова може да се пренесе како втор параметар низа од функции, кои ќе го заменат содржината на тековниот ред:

.queue([име на ред], нов ред );

Или пак како втор параметар може да се пренесе нова callback-функција за додавање во редот. Оваа функција пак добива друга функција како параметар. Ова овозможува автоматско отстранување на следниот елемент од редот и движење на редот:

.queue([име на ред], callback-функција(next) {
	next();
});

Секој елемент може да има еден или повеќе реди. Во многу апликации се користи само еден (fx). Редовите овозможуваат извршување на низа од дејства со елементот асинхроно, без прекин на извршувањето на програмата. Повикувањето на queue со callback-функција ни овозможува да ставиме нова функција на крајот од редот. callback-функцијата се извршува еднаш за секој елемент во множеството. При додавање на функција со queue, ние треба да се осигураме дека подоцна ќе се повика методот dequeue, за да може следната функција во синџирот да заработи.

Пример

Ајде да додадеме сопствена функција. Најпрвин, по клик на #animate, ќе прикажеме црвен квадрат, кој ќе се движи надесно во текот на 2s, потоа со помош на 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,
кој овозможува извршување на следната функција во редот на функции