jQuery-tehoste - animate() -menetelmä

jQuery:n vaikutusviittaus

Esimerkki

Muuta "div"-elementin korkeutta:

$(".btn1").click(function(){
  $("#box").animate({height:"300px"});
});

Kokeile itse

Määrittely ja käyttö

animate() -menetelmä suorittaa CSS-ominaisuuksien mukaisen mukautetun animaation.

Tämä menetelmä muuttaa elementin tilaa CSS-tyylin avulla. CSS-ominaisuusarvot muuttuvat asteittain, mikä mahdollistaa animaation luomisen.

Vain numeroyhteydet voivat luoda animaation (esim. "margin:30px"). Tekstiarvot eivät voi luoda animaatiota (esim. "background-color:red").

huomautus:Luo suhteellinen animaatio käyttämällä "+=" tai "-=".

Syntaksi 1

$().animate(tyylit,nopeus,easing,paluutoiminto)
parametrit kuvaus
tyylit

Välttämätön. Määrittää CSS-tyylin ja sen arvon, jotka aiheuttavat animaation.

Mahdolliset CSS-tyyppiarvot (esimerkkiä tarjotaan):

huomautus:CSS-tyylit käyttävät DOM-nimia (esim. "fontSize") asettamaan, ei CSS-nimiä (esim. "font-size")
nopeus

valinnainen. Määrittää animaation nopeuden. Oletus on "normal"

mahdolliset arvot:

  • millisekuntia (esim. 1500)
  • "slow"
  • "normal"
  • "fast"
easing

valinnainen. Määrittää easing-funktion, joka asettaa animaation nopeuden eri animaatiopisteissä

sisäänrakennetut easing-funktiot:

  • swing
  • linear

laajennuslisäosissa tarjotaan lisää easing-funktioita
paluutoiminto

valinnainen. Toiminto, joka suoritetaan animate-funktion suorittamisen jälkeen

Lisätietoja paluutoiminnosta löydät jQuery:n paluutoiminto Tämä luku.

syntaksi 2

$().animate(tyylit,asetukset)
parametrit kuvaus
tyylit pakollinen. Määrittää animaation CSS-tyylit ja -arvot (kuten edellä)
asetukset

valinnainen. Määrittää animaation lisäasetukset

mahdolliset arvot:

  • nopeus - asettaa animaation nopeuden
  • easing - määrittää käytettävän easing-funktion
  • callback - määrittää funktion, joka suoritetaan animaation päätyttyä
  • step - määrittää funktion, joka suoritetaan jokaisen animaation askeleen jälkeen
  • queue - totuusarvo. Indikoi, asetetaanko animaatio efektijonoon. Jos arvo on false, animaatio aloitetaan välittömästi
  • specialEasing - tyylit Yhden tai useamman CSS-ominaisuuden määrittely, sekä niiden vastaavat easing-funktiot

jQuery:n vaikutusviittaus