Metoda animate în jQuery

Toate metodele pe care le-am analizat în lecțiile anterioare sunt oarecum limitate - ele fac exact ceea ce sunt create să facă. Dacă ai nevoie de mai mult control asupra animației - folosește metoda universală animate.

Primul parametru pe care îl acceptă această metodă este un obiect, în care trebuie să setați noile valori ale proprietăților CSS pe care doriți să le animați. Iar al doilea parametru - timpul de execuție al animației.

Să implementăm această metodă pe următorul cod HTML:

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

Fie ca CSS să arate astfel:

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

Să facem ca la click pe buton elementul să se micșoreze până la următoarele dimensiuni: înălțime - 50px, lățime - 100px:

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

Dacă specificați valoarea în acest format height: '+=50', atunci animația va funcționa astfel: la valoarea curentă a înălțimii se va adăuga 50px (în cazul nostru) și elementul va fi animat treptat până la noua valoare. Să ne uităm la exemplu:

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

Pentru mai multe detalii despre metoda animate, consultați manualul jQuery.

animate

Există un astfel de markup:

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

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

Faceți ca atunci când faceți click pe div-ul cu #block lățimea lui să crească până la 200px în 1100ms.

Utilizați markup-ul din prima sarcină. Faceți ca la fiecare click pe div-ul cu #block lățimea lui să crească cu 200px și fiecare astfel de creștere să aibă loc în 900ms.

Utilizați markup-ul din prima sarcină. Faceți ca la fiecare click pe div-ul cu #block, lățimea și înălțimea lui să crească cu 100px și fiecare astfel de creștere să aibă loc în 950ms.

Utilizați markup-ul din prima sarcină. Faceți ca la fiecare click pe div-ul cu #block, acesta să se deplaseze la dreapta cu 100px și fiecare astfel de deplasare să aibă loc în 700ms.