Metoda animate u jQuery-u

Sve metode koje smo razmatrali u prethodnim lekcijama su donekle ograničene - one rade upravo ono za šta su kreirane. Ako vam je potrebno više kontrole nad animacijom - koristite univerzalnu metodu animate.

Kao prvi parametar ova metoda prihvata objekat, u kojem treba da postavite nove vrednosti CSS svojstava koja želite da animirate. A kao drugi parametar - vreme trajanja animacije.

Hajde da implementiramo ovu metodu na sledećem HTML kodu:

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

Neka CSS izgleda ovako:

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

Hajde da uradimo da se pri kliku na dugme element skupi na sledeće dimenzije: visina - 50px, širina - 100px:

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

Ako se vrednost navede u ovom formatu height: '+=50', onda će animacija raditi ovako: na trenutnu vrednost visine biće dodato 50px (u našem slučaju) i element će se postepeno animirati do nove vrednosti. Pogledajmo na primeru:

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

Detaljnije o metodu animate pogledajte u priručniku jQuery.

animate

Postoji ovakav HTML:

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

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

Učinite da se pri kliku na div sa #block njegova širina poveća do 200px za 1100ms.

Koristite HTML iz prvog zadatka. Učinite da se pri svakom kliku na div sa #block njegova širina povećava za 200px i svako tako povećanje traje 900ms.

Koristite HTML iz prvog zadatka. Učinite da se pri svakom kliku na div sa #block njegova širina i visina povećavaju za 100px i svako tako povećanje traje 950ms.

Koristite HTML iz prvog zadatka. Učinite da se pri svakom kliku na div sa #block, on pomera udesno za 100px i svako tako pomeranje traje 700ms.