Mga Epekto ng jQuery - Animation

Ang jQuery animate() method ay nagbibigay-daan sa iyo na gumawa ng custom na animation.

Epekto ng Eksibisyon



jQuery

jQuery Animation - animate() Method

Ang jQuery animate() method ay ginagamit para sa paglikha ng custom animation.

Mga sintaksis:

$(selector).animate({params},speed,callback);

Mandahil params Ang parameter ay nagtutukoy sa CSS attribute na gagamitin para sa animation.

Opisyal na speed Ang parameter ay nagtutukoy sa takbo ng epekto. Maaaring tumagal ito ng mga sumusunod na halaga: "slow", "fast" o miliseconds.

Opisyal na callback Ang parameter ay ang pangalan ng function na gagawin pagkatapos magsimula ang animation.

Ang mga sumusunod na halimbawa ay nagpapakita ng simpleng paggamit ng animate() method; ito ay inililipat ang <div> element sa kaliwa hanggang ang left attribute ay magiging 250 pixel:

Halimbawa

$("button").click(function(){
  $("div").animate({left:'250px'});
);

Subukan nang personal

Payo:Pangkaraniwan, lahat ng HTML element ay may static na posisyon at hindi maagaw.

Kung gusto mong gampanan ang posisyon, alalahanin nyo muna na ilagay ang CSS position attribute ng elemento sa relative, fixed o absolute!

jQuery animate() - Paggamit ng maraming attribute

Pansin nyo, maaaring gamitin ang maraming attribute sa paglikha ng animation:

Halimbawa

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  );
);

Subukan nang personal

Payo:Maari bang gamitin ang animate() method para gampanan ang lahat ng CSS attribute?

Oo, halos, kailangan alalahanin isang mahalagang bagay: kapag gumagamit ng animate(), dapat gumamit ng Camel marking sa lahat ng pangalan ng attribute, halimbawa, dapat gamitin ang paddingLeft kaysa padding-left, gamitin ang marginRight kaysa margin-right, at iba pa.

Pati na rin, ang animasyon ng kulay ay hindi kasali sa pangunahing jQuery library.

Kung gusto ninyong gumawa ng animasyon ng kulay, dapat ninyong i-download ang Color Animations plugin mula sa jQuery.com.

jQuery animate() - Gamit ang relative na halaga

Maaari rin ninyong itakda ang relative na halaga (ang halaga ay kahalintulad sa kasalukuyang halaga ng elemento). Kailangan ninyong magdagdag ng '+' o '-':

Halimbawa

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  );
);

Subukan nang personal

jQuery animate() - Gamit ang predefined na halaga

Maaari rin ninyong itakda ang halaga ng animasyon ng attribute bilang "show", "hide", o "toggle":

Halimbawa

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  );
);

Subukan nang personal

jQuery animate() - Gamit ang function ng kumpol

Pangunahing, ang jQuery ay nagbibigay ng function ng kumpol para sa animasyon.

Ito ay nangangahulugan na kung magpapakilala ninyong maraming animate() na tawag pagkatapos ng isa't isa, gumawa ang jQuery ng 'loob' na kumpol na naglalaman ng mga tawag na animate(). Pagkatapos, magsasalita ang mga animate() tawag sa pagkakataon.

Halimbawa 1

Itago, kung gusto ninyong gumawa ng iba't ibang animasyon sa pagitan, kailangan nating gamitin ang function ng kumpol:

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
);

Subukan nang personal

Halimbawa 2

Ang mga halimbawa sa ibaba ay inililipat ang <div> elemento sa kanang bahagi at nagpapalaki ng sukat ng teksto:

$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
);

Subukan nang personal