jQuery:n animate-metodi

Kaikki menetelmät, joita tarkastelimme edellisissä oppitunneissa, ovat hieman rajoittuneita - ne tekevät tarkalleen sitä, mitä varten ne on luotu. Jos tarvitset enemmän valvontaa animaation suhteen - käytä yleismaailmallista animate-metodia.

Ensimmäisenä parametrina tämä metodi ottaa vastaan objektin, jossa tulee asettaa uudet CSS-ominaisuuksien arvot, jotka haluat animoida. Ja toisena parametrina - animaation suoritusajan.

Toteutetaan tämä metodi seuraavalla HTML-koodilla:

<button id="button">click me</button>
<div id="elem">text...</div>

Olkoon CSS tällainen:

#elem {
	width: 150px;
	height: 150px;
	padding: 10px;
	border: 1px solid green;
}

Tehdään niin, että napin painalluksella elementti kutistuu seuraaviin kokoihin: korkeus - 50px, leveys - 100px:

$('#button').click(function() {
	$('#elem').animate({height: 50, width: 100}, 1000);
});

Jos määrität arvon tässä muodossa height: '+=50', niin animaatio toimii näin: nykyiseen korkeusarvoon lisätään 50px (meidän tapauksessamme) ja elementti animoituu sulavasti uuteen arvoon. Katsotaan esimerkkiä:

$('#button').click(function() {
	$('#elem').animate({height: '+=50', width: '+=50'}, 1000);
});

Katso tarkemmat tiedot animate-metodista jQueryn viitekirjasta.

animate

On olemassa tällainen HTML:

<body>
	<div id="block"></div>
</body>

div {
	width: 100px;
	height: 100px;
	border: 1px solid black;
	cursor: pointer;
	margin-bottom: 20px;
}

Tee niin, että napautettaessa divia, jolla on #block, sen leveys kasvaa 200px:een 1100ms:ssa.

Käytä HTML:ää ensimmäisestä tehtävästä. Tee niin, että jokaisella napautuksella divia, jolla on #block, sen leveys kasvaisi 200px ja jokainen tällainen kasvu tapahtuisi 900ms:ssa.

Käytä HTML:ää ensimmäisestä tehtävästä. Tee niin, että jokaisella napautuksella divia, jolla on #block, sen leveys ja korkeus kasvaisivat 100px ja jokainen tällainen kasvu tapahtuisi 950ms:ssa.

Käytä HTML:ää ensimmäisestä tehtävästä. Tee niin, että jokaisella napautuksella divia, jolla on #block, se siirtyisi oikealle 100px ja jokainen tällainen siirtyminen tapahtuisi 700ms:ssa.