Metoda animate w jQuery

Wszystkie metody, które omawialiśmy w poprzednich lekcjach, są w pewnym stopniu ograniczone - robią dokładnie to, do czego zostały stworzone. Jeśli potrzebujesz większej kontroli nad animacją - użyj uniwersalnej metody animate.

Pierwszym parametrem metoda ta przyjmuje obiekt, w którym należy ustawić nowe wartości właściwości CSS, które chcesz animować. A drugim parametrem - czas trwania animacji.

Zaimplementujmy tę metodę na następującym kodzie HTML:

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

Niech CSS wygląda tak:

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

Sprawmy, aby po kliknięciu przycisku element zmniejszył się do następujących rozmiarów: wysokość - 50px, szerokość - 100px:

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

Jeśli podasz wartość w takim formacie height: '+=50', to animacja będzie działać następująco: do bieżącej wartości wysokości zostanie dodane 50px (w naszym przypadku) i element zostanie płynnie animowany do nowej wartości. Spójrzmy na przykład:

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

Więcej o metodzie animate znajdziesz w podręczniku jQuery.

animate

Istnieje taki szablon:

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

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

Spraw, aby po kliknięciu na div z #block jego szerokość zwiększyła się do 200px w ciągu 1100ms.

Użyj szablonu z pierwszego zadania. Spraw, aby przy każdym kliknięciu na div z #block jego szerokość zwiększała się o 200px i każde takie zwiększenie następowało w ciągu 900ms.

Użyj szablonu z pierwszego zadania. Spraw, aby przy każdym kliknięciu na div z #block jego szerokość i wysokość zwiększały się o 100px i każde takie zwiększenie następowało w ciągu 950ms.

Użyj szablonu z pierwszego zadania. Spraw, aby przy każdym kliknięciu na div z #block, przesuwał się on w prawo o 100px i każde takie przesunięcie następowało w ciągu 700ms.