Метод 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,
който позволява изпълнението на следващата функция в опашката от функции