Njia animate katika jQuery

Njia zote ambazo tulizichambua katika masomo yaliyopita, zina kikomo kwa kiasi fulani - zinafanya haswa kile zilizoundwa kufanya. Ikiwa unahitaji udhibiti zaidi wa uhuishaji - tumia njia ya jumla animate.

Kigezo cha kwanza njia hii inakubali kitu, ambacho unapaswa kuweka thamani mpya za CSS sifa ambazo unataka kuihuisha. Na kigezo cha pili - muda wa utekelezaji wa uhuishaji.

Wacha tuutekeleze mbinu huu kwenye msimbo ufuatao wa HTML:

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

Acha CSS ionekane kama hii:

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

Wacha tufanye ili kwa kubofya kitufe kikisitizo kikunjwe hadi vipimo vifuatavyo: urefu - 50px, upana - 100px:

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

Ikiwa utabainisha thamani kwa muundo kama huu height: '+=50', basi uhuishaji utafanya kazi hivi: kwa thamani ya sasa ya urefu itaongezewa 50px (kwa upande wetu) na kikisitizo kitahuishwa kwa laini hadi thamani mpya. Tuangalie kwa mfano:

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

Kwa maelezo zaidi kuhusu mbinu animate angalia kwenye mwongozo jQuery.

animate

Kuna umbo la wavuti kama hii:

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

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

Fanya ili kwa kubonyeza kwenye div yenye #block upana wake uongezeke hadi 200px kwa 1100ms.

Tumia umbo la wavuti kutoka kwenye shida ya kwanza. Fanya ili kwa kila ubonyezi kwenye div yenye #block upana wake uongezeke kwa 200px na kila ongezeko kama hilo lifanyike kwa 900px.

Tumia umbo la wavuti kutoka kwenye shida ya kwanza. Fanya ili kwa kila ubonyezi kwenye div yenye #block upana na urefu wake ziongezeke kwa 100px na kila ongezeko kama hilo lifanyike kwa 950px.

Tumia umbo la wavuti kutoka kwenye shida ya kwanza. Fanya ili kwa kila ubonyezi kwenye div yenye #block, kisogee kulia kwa 100px na kila usogeaji kama huo ufanyike kwa 700px.