Az animate metódus jQuery-ben

Az összes metódus, amelyeket az előző leckékben megvizsgáltunk, némileg korlátozottak - pontosan azt teszik, amire készültek. Ha nagyobb felügyeletre van szüksége az animáció felett - használja az univerzális animate metódust.

Első paraméterként ez a metódus egy objektumot fogad, amelyben meg kell adnia azon CSS tulajdonságok új értékeit, amelyeket animálni szeretne. A második paraméter pedig az animáció végrehajtási ideje.

Végezzük el ezt a metódust a következő HTML kódon:

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

Legyen a CSS így:

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

Tegyük fel, hogy a gomb megnyomásakor az elem a következő méretekre zsugorodik: magasság - 50px, szélesség - 100px:

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

Ha az értéket ilyen formátumban adjuk meg height: '+=50', akkor az animáció a következőképpen fog működni: az aktuális magassági értékhez hozzáadódik 50px (esetünkben) és az elem finoman animálódik az új értékre. Nézzük meg a példán:

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

Az animate metódus részletesebb leírását lásd a jQuery kézikönyvében.

animate

Van egy ilyen felépítés:

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

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

Tegye úgy, hogy a div elemre kattintáskor, amelynek az azonosítója #block, a szélessége 200px értékre nőjön 1100ms alatt.

Használja az első feladat felépítését. Tegye úgy, hogy minden alkalommal, amikor a #block azonosítójú div elemre kattintanak, a szélessége 200px értékkel nőjön, és minden ilyen növekedés 900ms alatt történjen.

Használja az első feladat felépítését. Tegye úgy, hogy minden alkalommal, amikor a #block azonosítójú div elemre kattintanak, a szélessége és magassága 100px értékkel nőjön, és minden ilyen növekedés 950ms alatt történjen.

Használja az első feladat felépítését. Tegye úgy, hogy minden alkalommal, amikor a #block azonosítójú div elemre kattintanak, az elem 100px értékkel jobbra mozduljon el, és minden ilyen mozgatás 700ms alatt történjen.