Metoda animate v jQuery

Vse metode, ki smo jih obravnavali v prejšnjih lekcijah, so nekoliko omejene - delajo točno tisto, za kar so namenjene. Če potrebujete več nadzora nad animacijo - uporabite univerzalno metodo animate.

Prvi parameter te metode sprejme objekt, v katerem morate nastaviti nove vrednosti CSS lastnosti, ki jih želite animirati. In kot drugi parameter - čas izvedbe animacije.

Implementirajmo to metodo na naslednji HTML kodi:

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

Naj CSS izgleda takole:

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

Naredimo tako, da se ob kliku na gumb element skrči na naslednje mere: višina - 50px, širina - 100px:

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

Če določite vrednost v tej obliki height: '+=50', bo animacija delovala takole: k trenutni vrednosti višine bo prišteto 50px (v našem primeru) in element bo postopno animiran do nove vrednosti. Poglejmo na primeru:

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

Podrobnosti o metodi animate si oglejte v priročniku jQuery.

animate

Obstaja takšna postavitev:

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

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

Naredite tako, da se ob kliku na div z #block njegova širina poveča na 200px v času 1100ms.

Uporabite postavitev iz prve naloge. Naredite tako, da se ob vsakem kliku na div z #block njegova širina poveča za 200px in vsako tako povečanje poteka v času 900ms.

Uporabite postavitev iz prve naloge. Naredite tako, da se ob vsakem kliku na div z #block njegova širina in višina povečata za 100px in vsako tako povečanje poteka v času 950ms.

Uporabite postavitev iz prve naloge. Naredite tako, da se ob vsakem kliku na div z #block, premakne desno za 100px in vsaka taka premik poteka v času 700ms.