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:

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

Acha CSS ionekane kama hii:

css#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:

javascript$('#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:

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

Kwa maelezo zaidi kuhusu mbinu animate angalia kwenye mwongozo jQuery.

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

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