queue-metodi

queue-metodi mahdollistaa meille työskennellä elementtiin liitettyjen funktioiden jonon kanssa. Katso myös clearQueue-metodi, joka mahdollistaa meille poistaa jonosta kaikki funktiot, jotka eivät ole vielä käynnistyneet.

Syntaksi

Näin näytämme elementtiin liitettyjen suoritettavien funktioiden jonon. Voimme välittää valinnaisen parametrin jonon nimen merkkijonona (oletusarvoisesti fx - standardi efektijono):

.queue([jonon nimi]);

Voimme manipuloida jonoa. Suoritetaan kerran jokaiselle elementille. Tätä varten voimme välittää toisena parametrina funktioita sisältävän taulukon, joka korvaa nykyisen jonon sisällön:

.queue([jonon nimi], uusi jono );

Tai voimme toisena parametrina välittää uuden callback-funktion lisäämiseksi jonoon. Tämä funktio puolestaan vastaanottaa toisen funktion parametrina. Tämä mahdollistaa seuraavan elementin automaattisen poistamisen jonosta ja jonon liikuttamisen:

.queue([jonon nimi], callback-funktio(next) {
	next();
});

Jokaisella elementillä voi olla yksi tai useampi jono. Monissa sovelluksissa käytetään vain yhtä (fx). Jonot mahdollistavat toimintojen sarjan suorittamisen elementillä asynkronisesti, ilman ohjelman suorituksen keskeyttämistä. queue-kutsu callback-funktiolla mahdollistaa meille sijoittaa uuden funktion jonon loppuun. callback-funktio suoritetaan kerran jokaiselle elementille joukossa. Kun funktio lisätään queue-metodilla, meidän täytyy varmistaa, että myöhemmin kutsutaan dequeue-metodia, jotta seuraava funktio ketjussa alkaa toimia.

Esimerkki

Lisätään mukautettu funktio. Ensin, #animate-painikkeen painamisen jälkeen, näytämme punaisen neliön, joka liikkuu oikealle 2s ajan, sitten queue-metodin avulla lisäämme mukautetun funktion, joka värjää neliön vihreäksi lisäämällä luokan newcolor. Kuten näette, tässä kutsutaan dequeue-metodia poistamaan funktio jonosta. Sitten neliömme liikkuu vasemmalle puolisen sekuntia ja värjätään takaisin punaiseksi - toisen mukautetun funktion avulla poistamme luokan newcolor. Animaation päätyttyä kutistamme neliömme:

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

Esimerkki

Lisätään jono taulukkona poistaaksemme edellisen. Kun painamme #start-painiketta, näemme edellisen esimerkin animaation. Kun painamme #stop-painiketta, pysäytämme animaation lisäämällä tyhjän taulukon. Kun painamme uudelleen #start-painiketta, animaatio alkaa alusta:

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

Katso myös

animate-metodi,
joka animoi elementtien ominaisuuksia
clearQueue-metodi,
joka mahdollistaa kaikkien suorittamattomien elementtien poistamisen funktiojonosta
dequeue-metodi,
joka mahdollistaa seuraavan funktion suorittamisen funktiojonossa