Метод 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,
који омогућава извршавање следеће функције у реду функција