jQuery-tehosteet - animaatio

jQuery animate() -metodi mahdollistaa mukautettujen animaatioiden luomisen.

Vaikutuksen esittely



jQuery

jQuery-animaatio - animate() -metodi

jQuery animate() -metodi luo mukautetut animaatiot.

Syntaksi:

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

Välttämätön params Parametri määrittää animaation CSS-ominaisuuden.

Valinnainen speed Parametri määrittää vaikutuksen keston. Se voi olla seuraavia arvoja: "slow", "fast" tai millisekuntia.

Valinnainen callback Parametri on animaation suorittamisen jälkeen suoritettavan funktion nimi.

Seuraava esimerkki näyttää animate() -metodin yksinkertaisen käytön; se siirtää <div>-elementin vasemmalle, kunnes left-ominaisuus on 250 pikseliä:

Esimerkki

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

Kokeile itse

Vinkki:Oletuksena kaikki HTML-elementit ovat stabiileja ja niitä ei voida siirtää.

Jos haluat hallita sijaintia, muista ensin asettaa elementin CSS-position ominaisuus relative, fixed tai absolute!

jQuery animate() - hallitse useita ominaisuuksia

Huomaa, että animaation aikana voidaan käyttää useita ominaisuuksia:

Esimerkki

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

Kokeile itse

Vinkki:Voimmeko käyttää animate() -metodia kaikkien CSS-ominaisuuksien hallintaan?

Kyllä, melkein! Mutta on muistettava yksi tärkeä asia: käytettäessä animate() -metodia, kaikkien ominaisuuksien nimet on kirjoitettava Camel-merkkijonolla, esimerkiksi, käytetään paddingLeft eikä padding-left, marginRight eikä margin-right, jne.

Samalla värianimatiossa ei ole mukana jQuery:n ydinkirjastossa.

Jos haluat luoda värianimatiossa, sinun täytyy ladata Color Animations -lisäosa jQuery.com:sta.

jQuery animate() - Käyttää suhteellisia arvoja

Voit myös määritellä suhteellisia arvoja (arvo on suhteessa elementin nykyiseen arvoon). Arvon eteen täytyy lisätä += tai -=:

Esimerkki

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

Kokeile itse

jQuery animate() - Käyttää määritettyjä arvoja

Voit myös asettaa ominaisuuksien animaatioarvon "show", "hide" tai "toggle":

Esimerkki

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

Kokeile itse

jQuery animate() - Käyttää jonotusominaisuutta

Oletuksena jQuery tarjoaa animaatioille jonotusominaisuuden.

Tämä tarkoittaa, että jos kirjoitat useita animate()-kutsuja toisensa jälkeen, jQuery luo sisäisen jonon näiden kutsujen menetelmäpuoltojen mukaan. Sitten nämä animate-kutsut suoritetaan yksi kerrallaan.

Esimerkki 1

Piilota, jos haluat suorittaa eri animaatiot toisensa jälkeen, meidän täytyy käyttää jono-toimintoa:

$("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");
);

Kokeile itse

Esimerkki 2

Esimerkissä alla oleva <div>-elementti siirretään oikealle ja sitten tekstikoon kasvatetaan:

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

Kokeile itse