Meetod animate jQuery-s

Kõik meetodid, mida me eelmistes õppetundides läbi võtsime, on mõningatel määral piiratud - nad teevad täpselt seda, milleks nad loodud on. Kui vajad rohkem kontrolli animatsiooni üle - kasuta universaalset meetodit animate.

Esimena võtab see meetod vastu objekti, milles tuleb määrata uued CSS omaduste väärtused, mida soovid animeerida. Ja teise parameetrina - animatsiooni käivitamise aja.

Rakendagem seda meetodit järgmisel HTML koodil:

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

Olgu CSS selline:

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

Teeme nii, et nupule vajutades element muutuks järgmiste mõõtmeteni: kõrgus - 50px, laius - 100px:

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

Kui määrata väärtus sellises formaadis height: '+=50', siis animatsioon töötab nii: praegusele kõrguse väärtusele lisatakse 50px (meie puhul) ja element sujuvalt animeeritakse uue väärtuseni. Vaatame näidet:

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

Lisateavet meetodi animate kohta vaata jQuery käsiraamatust.

animate

On selline HTML:

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

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

Tehke nii, et divile, mille id on #block, vajutades suureneks selle laius 200px-ni 1100ms jooksul.

Kasutage esimese ülesande HTML-i. Tehke nii, et iga vajutusega divile, mille id on #block, suureneks selle laius 200px võrra ja iga selline suurenemine toimuks 900ms jooksul.

Kasutage esimese ülesande HTML-i. Tehke nii, et iga vajutusega divile, mille id on #block, suureneks selle laius ja kõrgus 100px võrra ja iga selline suurenemine toimuks 950ms jooksul.

Kasutage esimese ülesande HTML-i. Tehke nii, et iga vajutusega divile, mille id on #block, liiguks see paremale 100px võrra ja iga selline liigutamine toimuks 700ms jooksul.