animate-metodi

Metodi animate mahdollistaa animaatioefektien luomisen erilaisille CSS-ominaisuuksille. Ainoa pakollinen parametri - objekti CSS-ominaisuuksilla, samanlainen kuin mitä me välitämme metodiin css. Monet ominaisuudet, joilla on ei-numeerisia arvoja tai useita arvoja, eivät voi olla animoituja jQueryn perustoiminnolla (esimerkiksi background-color). Myöskään lyhennetyt CSS-ominaisuuksien nimet eivät aina ole tuettuja, esimerkiksi font - sen sijasta täytyy käyttää fontSize tai font-size. Arvojen eteen voi laittaa '+=' tai '-=', tällöin seuraavaksi määritetty arvo lisätään tai vähennetään ominaisuuden nykyisestä arvosta. Myös numeeristen arvojen sijasta voi laittaa show, hide tai toggle. Kaikki jQuery efektit, mukaan lukien animate, voidaan poistaa käytöstä globaalisti, käyttämällä asetusta jQuery.fx.off = true, joka asettaa keston arvoksi 0.

Syntaksi

Ensimmäisenä animaation parametrina välitetään objekti CSS-ominaisuuksilla ja niiden arvoilla muodossa avain: arvo, joita aiomme animoida. Loput parametrit katsotaan vapaaehtoisiksi. Toinen parametri - määrittää animaation keston millisekunteina, 400ms oletusarvoisesti. Kolmantena parametrina easing-funktion siirtymälle (oletusarvoisesti swing), sekä neljäntenä - callback-funktio, joka käynnistyy animaation suorittamisen jälkeen:

.animate(properties, [duration ], [easing ], [callback ]);

Ajan voi asettaa ei vain millisekunteina, vaan myös avainsanoilla slow (600ms) ja fast (200ms), mitä suurempi arvo, sitä hitaampi animaatio. Voidaan toisena parametrina välittää metodille erilaisia optioita, JavaScript-objektin muodossa, sisältäen parit avain: arvo:

.animate(properties, options);

Esimerkiksi asetetaan CSS-ominaisuuksille width ja height arvoksi toggle. Kesto 5000ms, easing-funktiot välitetään objektin muodossa, leveydelle se on lineaarinen funktio, ja korkeudelle - easeOutBounce, myös animaation päättyessä meillä suoritetaan kerran funktio (ks. avain complete), joka elementin jälkeen #test sijoittaa divin tekstillä 'Animation complete.':

$('#test').animate({
	width: 'toggle',
	height: 'toggle'
}, {
	duration: 5000,
	specialEasing: {
		width: 'linear',
		height: 'easeOutBounce'
	},
	complete: function() {
		$(this).after('<div>Animation complete.</div>');
	}
});

Alla taulukossa on esitetty objektin options ominaisuudet ja metodit ja niiden kuvaus:

Nimi	Kuvaus
`duration`	Animaation kesto millisekunteina - merkkijono tai luku. `400ms` oletusarvoisesti.
`easing`	Määrittää minkä easing-funktion käyttää. `swing` oletusarvoisesti.
`queue`	Boolen arvo tai merkkijono. `true` oletusarvoisesti. Ilmaisee - laitetaanko animaatio jonoon. Arvolla `false` animaatio alkaa välittömästi. Jos parametri annetaan merkkijonona, niin animaatio laitetaan jonoon, jota tämä parametri edustaa. Kun käytetään jonoa mukautetulla nimellä, animaatio ei käynnisty automaattisesti, jotta se käynnistettäisiin - käytä `dequeue('queuename')`.
`specialEasing`	Täällä voit välittää objektin, jossa avaimina ovat CSS-ominaisuudet, ja arvoina - niitä vastaavat easing-funktiot.
`step`	Funktio, jota kutsutaan jokaiselle animoidulle ominaisuudelle jokaisessa animoidussa elementissä. Se mahdollistaa Tween-objektin muokkaamisen, jotta ominaisuuden arvoa voidaan muuttaa ennen kuin se asetetaan. Parametreina se ottaa Tween-objektin nykyisen arvon `tween` ja `Tween`-objektin.
`progress`	Funktio, jota kutsutaan jokaisen animaation askeleen jälkeen, vain kerran per elementti riippumatta animoitujen ominaisuuksien määrästä. Funktio ottaa kolme parametria `animation` (promisen muodossa), `progress` (luku `0`:sta `1`:een) ja `remainingMs` (jäljellä olevat millisekunnit).
`complete`	Funktio, jota kutsutaan kerran elementin animaation päätyttyä. Funktio ottaa vastaan `animation` (promisen muodossa).
`start`	Funktio, jota kutsutaan, kun elementin animaatio alkaa. Funktio ottaa vastaan `animation` (promisen muodossa) ja `jumpedToEnd` (Boolen arvo. Jos `true`, niin animaatio päättyy automaattisesti).
`done`	Funktio, jota kutsutaan, kun elementin animaatio päättyy (sen promisse suoritettu onnistuneesti). Funktio ottaa vastaan `animation` (promisen muodossa) ja `jumpedToEnd` (Boolen arvo. Jos `true`, niin animaatio päättyy automaattisesti).
`fail`	Funktio, jota kutsutaan, kun elementin animaatio päättyy virheellä (sen promisse suoritettu virheellisesti). Funktio ottaa vastaan `animation` (promisen muodossa) ja `jumpedToEnd` (Boolen arvo. Jos `true`, niin animaatio päättyy automaattisesti).
`always`	Funktio, jota kutsutaan, kun elementin animaatio päättyy tai pysähtyy ilman loppuun suorittamista (sen promisse suoritettu onnistuneesti tai virheellisesti). Funktio ottaa vastaan `animation` (promisen muodossa) ja `jumpedToEnd` (Boolen arvo. Jos `true`, niin animaatio päättyy automaattisesti).

Esimerkki

Laittakaamme napin #left painalluksella siirtämään vihreää neliötä vasemmalle, ja napin #right oikealle 50px, asetetaan myös kesto 600ms:een - komennolla slow:

<button id="left">vasen</button>
<button id="right">oikea</button>
<div class="block"></div>

div {
	position: absolute;
	background-color: green;
	left: 50px;
	width: 100px;
	height: 100px;
	margin: 5px;
}

$('#right').click(function() {
	$('.block').animate({'left': '+=50px'}, 'slow');
});
	
$('#left').click(function() {
	$('.block').animate({'left': '-=50px'}, 'slow');
});

Katso myös

metodi show,
joka pehmeesti näyttää elementit
metodi stop,
joka mahdollistaa käynnissä olevan animaation pysäyttämisen
metodi delay,
joka asettaa tapahtumien suorituksen viiveen
ominaisuus jQuery.fx.off,
joka mahdollistaa animaation globaalin poistamisen käytöstä
selektori animated,
joka valitsee elementit, jotka tällä hetkellä ovat käytössä animaatiossa