Metoda queue

Metoda queue na lejon të punojmë me radhën e funksioneve të lidhura me një element. Shihni gjithashtu metodën clearQueue, e cila na lejon të fshijmë nga radha të gjitha funksionet që nuk janë ekzekutuar ende.

Sintaksa

Kështu ne shfaqim radhën e funksioneve që do të ekzekutohen, të lidhura me elementin. Mund të kaloni si parametër opcional emrin e radhës në formë të vargut (parazgjedhur fx - radha standarde e efekteve):

.queue([emri i radhës]);

Ne mund të manipulojmë radhën. Ekzekutohet një herë për çdo element. Për këtë mund të kaloni si parametër të dytë një varg funksionesh, të cilat do të zëvendësojnë përmbajtjen e radhës aktuale:

.queue([emri i radhës], radha e re );

Ose si parametër të dytë mund të kaloni një funksion callback të ri për të shtuar në radhë. Ky funksion nga ana tjetër merr një funksion tjetër si parametër. Kjo lejon që automatikisht të hiqet nga radha elementi i ardhshëm dhe të ecur radha:

.queue([emri i radhës], funksioni callback(next) {
	next();
});

Çdo element mund të ketë një ose më shumë radhë. Në shumë aplikacione përdoret vetëm një (fx). Radhët lejojnë kryerjen e veprimeve në mënyrë sekuenciale me elementin në mënyrë asinkrone, pa ndërprerë ekzekutimin e programit. Thirrja queue me një funksion callback na lejon të vendosim një funksion të ri në fund të radhës. Funksioni callback ekzekutohet një herë për çdo element në grup. Kur shtohet një funksion duke përdorur queue, ne duhet të sigurohemi që më pas do të thirret metoda dequeue, në mënyrë që funksioni i ardhshëm në zinxhir të fillojë të punojë.

Shembull

Le të shtojmë një funksion të personalizuar. Së pari, pas klikimit në #animate, ne do të shfaqim një katror të kuq, i cili do të lëvizë djathtas për 2s, pastaj me ndihmën e queue ne do të shtojmë një funksion të personalizuar, i cili do ta rilyej katrorin në të gjelbër, duke shtuar klasën newcolor. Siç e shihni, pastaj këtu thirret dequeue, për të hequr funksionin nga radha. Pastaj katrori ynë do të lëvizë majtas për gjysmë sekonde dhe do të rilyhet përsëri në të kuq - me ndihmën e funksionit të dytë të personalizuar ne heqim klasën newcolor. Në fund të animacionit ne e mbyllim katrorin tonë:

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

Shembull

Le të shtojmë një radhë në formë vargu, për të fshirë atë të mëparshme. Kur klikohet butoni #start ne do të shohim animacionin nga shembulli i mëparshëm. Kur klikohet butoni #stop ne do të ndalojmë animacionin duke shtuar një varg bosh. Kur klikohet përsëri #start animacioni do të fillojë përsëri:

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

Shihni gjithashtu

metoda animate,
e cila animon vetitë e elementeve
metoda clearQueue,
e cila lejon të fshihen të gjithë elementët e paekzekutuar nga radha e funksioneve
metoda dequeue,
e cila lejon të ekzekutohet funksioni vijues në radhën e funksioneve