Metode animate jQuery

Visas metodes, kuras mēs apskatījām iepriekšējās nodarbībās, ir zināmā mērā ierobežotas - tās dara tieši to, kam tās ir izveidotas. Ja jums nepieciešams vairāk kontroles pār animāciju - izmantojiet universālo metodi animate.

Pirmo parametru šī metode pieņem objektu, kurā jāiestata jaunās CSS īpašību vērtības, kuras vēlaties animēt. Un otro parametru - animācijas izpildes laiku.

Realizēsim šo metodi uz šāda HTML koda:

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

Lai CSS izskatās šādi:

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

Izveidosim tā, lai noklikšķinot uz pogas, elements sarautos līdz šādiem izmēriem: augstums - 50px, platums - 100px:

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

Ja norādīt vērtību šādā formātā height: '+=50', tad animācija strādās šādi: pie pašreizējā augstuma vērtības tiks pieskaitīti 50px (mūsu gadījumā) un elements tiks veikli animēts līdz jaunai vērtībai. Apskatīsim piemērā:

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

Sīkāk par metodi animate skatīties jQuery uzziņu grāmatā.

animate

Ir šāds makets:

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

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

Izveidojiet tā, lai noklikšķinot uz div ar #block tā platums palielinātos līdz 200px laikā 1100ms.

Izmantojiet maketu no pirmā uzdevuma. Izveidojiet tā, lai pie katra noklikšķinājuma uz div ar #block tā platums palielinātos par 200px un katrs šāds palielinājums notiktu laikā 900ms.

Izmantojiet maketu no pirmā uzdevuma. Izveidojiet tā, lai pie katra noklikšķinājuma uz div ar #block tā platums un augstums palielinātos par 100px un katrs šāds palielinājums notiktu laikā 950ms.

Izmantojiet maketu no pirmā uzdevuma. Izveidojiet tā, lai pie katra noklikšķinājuma uz div ar #block, tas pārvietotos pa labi par 100px un katrs šāda pārvietošanās notiktu laikā 700ms.