Metodas animate jQuery

Visi metodai, kuriuos nagrinėjome ankstesnėse pamokose, yra šiek tiek riboti - jie daro būtent tai, kam buvo sukurti. Jei jums reikia daugiau kontrolės su animacija - naudokite universalų metodą animate.

Pirmuoju parametru šis metodas priima objektą, kuriame reikia nustatyti naujas CSS savybių reikšmes, kurias norite animuoti. O antruoju parametru - animacijos vykdymo laiką.

Įgyvendinkime šį metodą su šiuo HTML kodu:

<button id="button">spausk mane</button>
<div id="elem">tekstas...</div>

Tegul CSS atrodo taip:

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

Padarykime taip, kad paspaudus ant mygtuko elementas susitrauktų iki šių matmenų: aukštis - 50px, plotis - 100px:

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

Jei nurodysite reikšmę tokiu formatu height: '+=50', tai animacija veiks taip: prie esamo aukščio reikšmės bus pridėta 50px (mūsų atveju) ir elementas bus sklandžiai animuotas iki naujos reikšmės. Pažiūrėkime pavyzdyje:

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

Išsamiau apie metodą animate žiūrėkite jQuery žinyne.

animate

Yra tokia išdėstymas:

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

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

Padarykite taip, kad paspaudus ant div su #block jo plotis padidėtų iki 200px per 1100ms.

Naudokitės išdėstymu iš pirmosios užduoties. Padarykite taip, kad kiekvieną kartą paspaudus ant div su #block jo plotis padidėtų 200px ir kiekvienas toks padidėjimas vyktų per 900ms.

Naudokitės išdėstymu iš pirmosios užduoties. Padarykite taip, kad kiekvieną kartą paspaudus ant div su #block jo plotis ir aukštis padidėtų 100px ir kiekvienas toks padidėjimas vyktų per 950ms.

Naudokitės išdėstymu iš pirmosios užduoties. Padarykite taip, kad kiekvieną kartą paspaudus ant div su #block, jis pasislinktų į dešinę 100px ir kiekvienas toks pasislinkimas vyktų per 700ms.