Metoda queue

Metoda queue pozwala nam pracować z kolejką funkcji powiązanych z elementem. Zobacz także metodę clearQueue, która pozwala nam usunąć z kolejki wszystkie funkcje, które nie zostały uruchomione.

Składnia

W ten sposób wyświetlamy kolejkę wykonywanych funkcji, powiązanych z elementem. Można przekazać opcjonalnym parametrem nazwę kolejki w postaci ciągu znaków (domyślnie fx - standardowa kolejka efektów):

.queue([nazwa kolejki]);

Możemy manipulować kolejką. Wykonuje się raz dla każdego elementu. W tym celu można przekazać jako drugi parametr tablicę funkcji, które zastąpią zawartość bieżącej kolejki:

.queue([nazwa kolejki], nowa kolejka );

Można też jako drugi parametr przekazać nową funkcję callback do dodania do kolejki. Ta funkcja z kolei otrzymuje inną funkcję jako parametr. To pozwala automatycznie usuwać z kolejki następny element i przesuwać kolejkę:

.queue([nazwa kolejki], funkcja-callback(next) {
	next();
});

Każdy element może mieć jedną lub więcej kolejek. W wielu aplikacjach używana jest tylko jedna (fx). Kolejki pozwalają na realizację sekwencji działań na elemencie asynchronicznie, bez przerywania wykonania programu. Wywołanie queue z funkcją callback pozwala nam umieścić nową funkcję na końcu kolejki. Funkcja callback wykonuje się raz dla każdego elementu w zestawie. Przy dodawaniu funkcji za pomocą queue, musimy się upewnić, że później zostanie wywołana metoda dequeue, aby następna funkcja w łańcuchu zadziałała.

Przykład

Dodajmy niestandardową funkcję. Najpierw, po naciśnięciu #animate, pokażemy czerwony kwadrat, który będzie przesuwał się w prawo przez 2s, następnie przy pomocy queue dodamy niestandardową funkcję, która przemaluje kwadrat na zielony, dodając klasę newcolor. Jak widać, następnie tutaj wywoływane jest dequeue, aby usunąć funkcję z kolejki. Następnie nasz kwadrat będzie przesuwał się w lewo przez pół sekundy i przemaluje się z powrotem na czerwony - przy pomocy drugiej funkcji niestandardowej usuwamy klasę newcolor. Po zakończeniu animacji zwijamy nasz kwadrat:

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

Przykład

Dodajmy kolejkę w postaci tablicy, aby usunąć poprzednią. Po naciśnięciu przycisku #start będziemy widzieć animację z poprzedniego przykładu. Po naciśnięciu przycisku #stop będziemy zatrzymywać animację poprzez dodanie pustej tablicy. Po ponownym naciśnięciu #start animacja będzie zaczynać się od nowa:

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

Zobacz też

metoda animate,
która animuje właściwości elementów
metoda clearQueue,
która pozwala usunąć wszystkie nie wykonane elementy z kolejki funkcji
metoda dequeue,
która pozwala wykonać następną funkcję w kolejce funkcji