Metóda animate v jQuery

Všetky metódy, ktoré sme rozoberali v predchádzajúcich lekciách, sú trochu obmedzené - robia presne to, na čo boli vytvorené. Ak potrebujete väčšiu kontrolu nad animáciou - použite univerzálnu metódu animate.

Prvým parametrom táto metóda prijíma objekt, v ktorom by ste mali nastaviť nové hodnoty CSS vlastností, ktoré chcete animovať. A druhým parametrom - čas trvania animácie.

Poďme implementovať túto metódu na nasledujúcom HTML kóde:

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

Nech CSS vyzerá takto:

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

Urobme tak, aby sa po kliknutí na tlačidlo element zmenšil na nasledujúce rozmery: výška - 50px, šírka - 100px:

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

Ak zadáte hodnotu v takomto formáte height: '+=50', animácia bude fungovať takto: k aktuálnej hodnote výšky sa pripočíta 50px (v našom prípade) a element bude plynule animovaný na novú hodnotu. Pozrime sa na príklad:

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

Viac o metóde animate nájdete v príručke jQuery.

animate

Existuje takéto HTML:

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

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

Urobte tak, aby sa po kliknutí na div s #block jeho šírka zväčšila na 200px za 1100ms.

Použite HTML z prvej úlohy. Urobte tak, aby sa pri každom kliknutí na div s #block jeho šírka zväčšila o 200px a každé také zväčšenie prebehlo za 900px.

Použite HTML z prvej úlohy. Urobte tak, aby sa pri každom kliknutí na div s #block jeho šírka a výška zväčšili o 100px a každé také zväčšenie prebehlo za 950px.

Použite HTML z prvej úlohy. Urobte tak, aby sa pri každom kliknutí na div s #block, posunul sa doprava o 100px a každý taký posun prebehol za 700px.