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:

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

Tegul CSS atrodo taip:

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

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

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

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

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

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