Millä jquery-menetelmällä voit luoda animaatioita. JQuery animate() - Suhteellisten arvojen käyttäminen. Takaisinsoittotoimintojen käyttäminen tehosteissa

Pieni ripaus animaatiota voi piristää mitä tahansa tylsää käyttöliittymää. Tämän päivän artikkelissa opit käyttämään sitä oikein jQueryn avulla.

Johdanto

Animaatio on käsite, joka aiheuttaa yleensä ristiriitaisia ​​reaktioita ihmisten keskuudessa. Jotkut pitävät sitä hyödyllisenä, toiset tuomitsevat sen liiallisen käytön. Tästä huolimatta oikein käytettynä animaatio voi usein kaunistaa käyttöliittymää ja tehdä siitä siistimmän ja elävämmän. Tämän päivän artikkelissa tarkastellaan nopeasti jQueryn perusteita, opimme sitten luomaan ensimmäisen animaatiomme, oppimaan rakentamaan erilaisia ​​tehosteita ja luomaan sitten animaation, jota voidaan käyttää oikeissa projekteissa.

Vaihe 1: jQueryn perusteet

jQuery on JavaScript-kirjasto, joka on suunniteltu auttamaan kehittäjää luomaan monipuolisia, interaktiivisia verkkosivustoja ja käyttöliittymiä käyttämällä mahdollisimman vähän koodia.

Tyypillinen koodirivi näyttää tältä:

$(DOM Element).jotain();

Katsotaanpa jokaista osaa:

• $ - Pikakirjoitus jQuery-objektille. Jos käytät samanaikaisesti useita puitteita samalla sivulla, käytä $-merkin sijaan jQuery-lyhennettä: jQuery(DOM Element).something();
• (DOM Element) – Elementti, jolla aiot tehdä jotain. Tämä on yksi Avainominaisuudet jQuery. Voit käyttää CSS-valitsimia saadaksesi haluamasi elementin. Tässä voidaan käyttää mitä tahansa CSS-tiedostossa toimivia valitsimia. Tunnukset, luokat, pseudo-luokat, mitä tahansa.
• .something() – Mitä haluat tehdä tuloksena olevalla elementillä. Tämä voi olla mitä tahansa elementin piilottamisesta AJAX-pyynnön tekemiseen tapahtumakäsittelijälle.

Tänään tarkastelemme vain animaatiota ja sen toimivuuteen liittyviä tehosteita.

Vaihe 2: Käytä sisäänrakennettuja tehosteita

jQuery tarjoaa suuri määrä sisäänrakennettuja menetelmiä, joita voit käyttää heti käyttöönoton jälkeen. Nämä ovat menetelmiä elementtien näyttämiseen/piilottamiseen eri muunnelmilla, mukaan lukien elementin liukuminen ja sen läpinäkyvyyden muuttaminen. Voit myös käyttää useita vaihtotapoja, jotka säätelevät elementin näkyvyyttä.

Ennen kuin tarkastelemme kutakin näistä menetelmistä, tutustu kunkin menetelmän kutsumisen perusmuotoon:

$("#elementti").effect();

Yllä on jQueryn perusparadigma, ensin hankitaan tarvittava elementti CSS-valitsimilla. Seuraavaksi kutsumme yksinkertaisesti mitä tahansa sisäänrakennetuista menetelmistä.

Vaikka useimpia menetelmiä voidaan kutsua ilman parametreja, niiden toimintoja on usein mukautettava. Kukin menetelmä vaatii vähintään kaksi parametria: nopeus ja takaisinsoitto .

nopeus – määrittää animaation keston sekunneissa. Voit välittää yhden arvoista nimellä avainsanoja: hidas, normaali tai nopea; tai aseta aika millisekunteina.

takaisinsoitto on toiminto, joka suoritetaan animaation jälkeen. Voit käyttää sitä mihin tahansa, kuten AJAX-puhelun soittamiseen taustalla tai osan päivittämiseen käyttöliittymä ja paljon enemmän. Vain mielikuvituksesi rajoittaa sinua.

• show / hide – Menetelmät elementin näyttämiseen ja piilottamiseen. Hyväksy nopeus ja takaisinsoitto parametreiksi.
• toggle – Menetelmä, joka manipuloi elementin näyttöä elementin nykyisestä tilasta riippuen. Eli jos se on piilotettu, se näyttää sen ja päinvastoin. Käyttää Näytä ja piilottaa -menetelmiä.
• slideDown / slideUp – Melko ilmeisiä menetelmiä. Muuttamalla elementin korkeutta luodaan liukuva animaatio, joka näyttää tai päinvastoin piilottaa elementin.
• slideToggle – Melkein sama kuin vaihtomenetelmä, paitsi että se käyttää slideDown/slideUp-menetelmiä elementin näyttämiseen/piilottamiseen.
• fadeIn /fadeout – Muuta elementin läpinäkyvyyttä luodaksesi häipyvä vaikutus.
• fadeTo – Muuttaa elementin läpinäkyvyyttä välitetyn arvon mukaan. Kuten arvata saattaa, se hyväksyy ylimääräisen opasiteettiparametrin, jossa 0 on täyttä läpinäkyvyyttä ja 1 on täyttä läpinäkyvyyttä.

Lisätoimintona vaihtomenetelmä voi ottaa parametriksi lausekkeen, joka määrittää, onko elementti näkyvissä vai piilossa.

Jos esimerkiksi haluat vaihtaa vain ne luettelokohteet, joilla on luokka vaikutus, koodisi näyttää tältä:

$("li").toggle($(this).hasClass("vaikutus"));

Yksinkertaisesti sanottuna vaihtotoiminto tarkistaa sille parametrina välitetyn lausekkeen, ja jos se on tosi, se vaihtaa elementin näkyvyyttä. Esimerkissä antamamme lauseke tarkistaa, onko elementillä tietty luokka.

Vaihe 3: Luo oma animaatio

Hyvin usein sisäänrakennetut menetelmät eivät sovi tarpeisiisi, jolloin haluat todennäköisesti luoda omia tehosteitasi. jQuerylla voit tehdä tämän helposti.

Mukautetun animaatiotehosteen luomiseen tarvitset animointimenetelmän. Se näyttää tältä:

$("#somelement").animate((ominaisuus: arvo), );

Animointimenetelmä on melko samanlainen kuin mikä tahansa muu menetelmä, koska sitä käytetään täsmälleen samalla tavalla. Saamme elementin ja välitämme sille joitain parametreja. Se hyväksyy parametrit, joissa animointimenetelmä eroaa valmiista tehosteista.

Nopeus- ja takaisinsoittoparametrit suorittavat samat toiminnot kuin edellisissä menetelmissä. Objekti, jonka ominaisuudet koostuvat tietystä määrästä avain/arvo-pareja, tekee tästä menetelmästä ainutlaatuisen. Ohitat jokaisen ominaisuuden, jonka haluat animoida, yhdessä lopputuloksen kanssa. Oletetaan esimerkiksi, että haluat animoida elementin leveyden 90 prosenttiin sen nykyisestä arvosta. Tämä voidaan tehdä seuraavasti:

$("#somelement").animate((width: "90%"), 350, function())( alert ("Animaatio on suoritettu."); ));

Seuraava esimerkkikoodi animoi leveyden muuttumaan 90 % ja näyttää sitten viestin, että animaatio on valmis.

Huomaa, että määrää ei ole rajoitettu. Voit lisätä animaatioita suureen joukkoon ominaisuuksia, mukaan lukien läpinäkyvyys, marginaalit, täyte, reunukset ja kirjasinkoot. Animointimenetelmä on myös kätevä, koska se voi toimia minkä tahansa mittayksikön kanssa. Pikselit, ems, prosentit - kaikki toimii. Joten jopa alla oleva mutkainen koodiesimerkki toimii. Totuus ei näytä kovin selvältä.

$("#somelement").animate(( leveys: "90%" fontSize: "14em", korkeus: "183px", peittävyys: 0,8, marginaaliYlä: "2cm", marginaaliVasen: "0,3in", reunusAlhaalla: "30mm" ", ), 350, function())(alert ("Animaatio on päättynyt.");));

Kun määritetään monisanainen ominaisuus, se kirjoitetaan ilman väliviivaa ja toisen sanan ensimmäinen kirjain on kirjoitettava isolla. Tämä tallennus eroaa huomattavasti tavallisesta CSS-syntaksi, joten muista yrittää muistaa tämä. Esimerkiksi border-top-ominaisuuden tulee olla kirjoitettu borderTop .

Huomaa: jQuery sallii vain numeeristen ominaisuusarvojen animoinnin. Tämä tarkoittaa, että et voi animoida väriominaisuuksia pelkän jQueryn avulla. Mutta se ei ole niin paha. KANSSA vähän apua jQuery UI, voit lisätä värianimaatioita erittäin helposti.

Vaihe 4: Tehosteen määrittäminen

Jos katsot yksinkertaista vaikutusta esittelysivulla, saatat huomata pienen virheen. Hiiren liikuttaminen toistuvasti elementin päällä johtaa pitkän toistojonon muodostumiseen animaatiotehosteet. Tuloksena on epämiellyttävä, nykivä vaikutus.

Helpoin tapa ratkaista tämä ongelma on käyttää stop-menetelmää juuri ennen animaation alkamista. Tämä menetelmä tyhjentää jonon täydellisesti ja animaatio toimii normaalisti.

Esimerkiksi tämä on tavallinen koodisi:

$("#jokuelementti") .hover(function() ( $(this).animate(( alkuun: 20 ), "nopea"); ), function() ( $(this).animate(( alkuun: 0 ) , "nopea");

Käyttämällä stop-menetelmää tarpeettomien animaatioiden toistojen estämiseksi uusi koodisi näyttää tältä:

$("#jokuelementti") .hover(function() ( $(this).stop().animate(( top: 20 ), "nopea"); ), function() ( $(this).stop() .animate(( ylhäältä: 0 ), "nopea" ));

Hyvin yksinkertaista, eikö? Mutta tällä menetelmällä on yksi pieni ongelma. Nopeat liikkeet eivät johda toistuvaan tehosteeseen, mutta tämä tapahtuu epätäydellisen animaation kustannuksella. Jos haluat ratkaista tämän ongelman kokonaan, tarvitset laajennuksen, kuten hoverFlow.

Vaihe 5: Realismin lisääminen – helpottaminen

Jos haluat lisätä hieman realistisuutta, tarvitset enemmän hallintaa animaation nopeudessa. Tässä helpotus tulee avuksemme. Easing ohjaa animaation kiihtyvyyttä ja hidastuvuutta ajan myötä.

Easingin oletusarvoisesti käyttämää menetelmää kutsutaan swingiksi, joka on sisäänrakennettu jQueryn ydintoimintoihin. Robert Pennerin helpotuslaajennuksella voit käyttää useita erilaisia ​​tehosteita.

On vain yksi varoitus, kun me puhumme henkilökohtaisten helpotustehosteiden käyttämisestä: voit käyttää niitä vain erikoisanimaatiotehosteiden, eli animate()-menetelmän kanssa. Kun olet ottanut laajennuksen käyttöön, minkä tahansa helpotustavan käyttäminen on hyvin yksinkertaista välittämällä se parametrina:

$("#somelement").animate(( leveys: "90%" korkeus: "183px", ), 550, "easeInElastic");

Voit tarkistaa, miltä erilaiset helpotusefektit näyttävät toiminnassa vastaavan osion esittelysivulta. Vaikka jotkin tehosteista eivät sovellu kaikkiin tilanteisiin, animaatiosi näyttää paljon houkuttelevammalta, jos käytät joitain helpotustekniikoita oikein.

Vaihe 6: Nosta se ylös – jQuery-käyttöliittymä

Päivittäminen jQuery-käyttöliittymään tuo meille joukon tarpeellisia ominaisuuksia. Itse asiassa käyttää lisätoimintoja, et tarvitse täyttä kirjastoa. Tarvitset sisäänrakennettuja tehosteita saadaksesi tarvitsemasi toiminnot. Ei itse käyttöliittymäydin, vain sisäänrakennetuilla tehosteilla varustettu tiedosto, joka painaa noin 10 kilotavua.

Suurin osa tärkeitä toimintoja jQuery-käyttöliittymän tehostekirjasto tukee värianimaatioita, helpotusta ja siirtymäluokkia.

Jos muistat, sanoin jo, että jQueryssä animaatiota voidaan soveltaa vain numeerisiin arvoihin. jQuery-käyttöliittymän avulla voit unohtaa tämän rajoituksen. Nyt voit helposti animoida elementin taustavärin, reunuksen värin ja vastaavat. Lisäksi jQuery-käyttöliittymä yksinkertaisesti laajentaa animaation perustoimintoja sen sijaan, että luotaisiin erillisiä toimintoja uusille ominaisuuksille. Eli jos sisällytit kirjaston sivullesi, voit käyttää sitä normaali tapa animoi ja se tekee kaiken likaisen työn puolestasi.

Jos esimerkiksi haluat animoida elementin reunuksen värin hiirellä, koodisi näyttäisi tältä:

$(.block").hover(function() ( $(this).animate(( borderColor: "musta" ), 1000); ),function() ( $(this).animate(( borderColor: "red " ), 500); ));

Luokkasiirtymät vastaavat luokkien välisestä animaatiosta. Kun käytät jQuery-ydinkirjastoa, poistat ja lisäät muuttuvan luokan ulkomuoto elementtiä, tämä tapahtuu välittömästi. Kun sinulla on käyttöliittymäkirjasto käytössäsi, sinulla on mahdollisuus läpäistä Lisävaihtoehdot, ohjaa animaation nopeutta, helpotusta ja takaisinsoittomenetelmiä. Tämä toiminto, kuten aiemmat, on lisäosa olemassa olevaan jQuery API:hen siirtymisen helpottamiseksi.

Vaihe 7. Ensimmäisen todellisen vaikutuksen luominen

Kaikki yllä olevat esimerkit ovat vain toiminnon demoversioita. Olisi mukavaa käyttää niitä todellisen vaikutelman luomiseen. Juuri näin teemme. Vaikutusemme ei ole jotain radikaalia tai erityistä, mutta sen avulla opit soveltamaan hankittua tietoa käytännössä.

Oletetaan, että meidän on näytettävä kuva, jonka sisällä näkyy kaksi osaa, kun hiirtä pidetään. Yläosassa on kuvan otsikko, alaosassa sen lyhyt kuvaus. Tiedän, että löydät monia erilaisia ​​laajennuksia, jotka tekevät saman, mutta tänään teemme sen tyhjästä. Se ei ole niin vaikeaa kuin miltä näyttää. Itse asiassa se on hyvin yksinkertainen ja tehdään melko nopeasti. Aloitetaan.

HTML

Ensin tarvitsemme HTML-pohjan

Animaatio JQueryllä aloittelijoille Yksinkertainen esimerkki käytöstä

Yksinkertainen esimerkki jQueryn animaatioominaisuuksien käytöstä. Vie hiiren osoitin kuvan päälle nähdäksesi sen otsikon ja kuvauksen. Kun siirrät hiiren pois, ne katoavat. Kun viet hiiren osoittimen kuvan nimen ja kuvauksen sisältävien lohkojen päälle, taustaväri muuttuu.

Animaatiossa käytetään helpotusta houkuttelevuuden lisäämiseksi.

Teemametsä Sivusto, josta löydät monia CodeCanyon-malleja ja teemoja Sivusto, joka sisältää monia komentosarjoja ja koodiesimerkkejä.

Tämän vaikutuksen saavuttamiseksi meidän on mietittävä kunkin elementin rakennetta. Jokainen elementti suljetaan div-tunnisteeseen, jossa on luokka kohde. Divin sisällä sijoitetaan kolme elementtiä: kuva ja kaksi div-elementtiä, jotka sisältävät kuvan nimen ja kuvauksen.

Loput osat ovat melko yksinkertaisia. Meidän on yhdistettävä jQuery-kirjasto, jQuery-käyttöliittymä ja tiedosto, joka sisältää meidän henkilökoodi. Muista, että tarvitsemme vain jQuery UI -tehosteita, jos haluat lisätä tehosteita, tarvitset erityisen kokoonpanon, jonka voit ladata täältä.

Tältä sivumme näyttää tässä vaiheessa.

CSS .item ( sijainti: suhteellinen; marginaali: 20px 60px 40px 0; ylivuoto: piilotettu; ) .item .title, .item .desc ( tausta: #000; väri: #fff; sijainti: absoluuttinen; näyttö: lohko; leveys: 638 pikseliä täyttö: 5px 0 15px 10px)

Tässä on muutamia asioita, joihin sinun tulee kiinnittää huomiota. Jokaisella elementillä on ominaisuus asema merkityksessä suhteellinen, jotta muut voidaan helposti sijoittaa tämän elementin sisään. Myös lohkoille on määritetty omaisuus ylivuoto piilotettu, jotta voimme piilottaa kuvan otsikon ja kuvauksen ulkopuolelta, kun niitä ei tarvita.

Lohkojen, jotka sisältävät otsikon ja kuvauksen, ominaisuus on asetettu arvoon sijainti: ehdoton, jotta ne asettuvat tarkasti kuvan sisältävän lohkon sisään. Otsikolle on määritetty koordinaatti alkuun: 0, joten se sijaitsee yläosassa, ja kuvaus pohja: 0, ja sen mukaisesti se sijaitsee alla.

Loput CSS:stä on hyvin yksinkertaista, tyylillä fontit ja hieman sijoittelua. Ei mitään erityistä.

Nyt sivumme näyttää tältä.

Ota JavaScript-taika käyttöön $(document).ready(function() ( // Demon muiden osien koodi $(.item").children("div.title").animate((ylä: -60) , 300); ) .children("div.title").stop().animate((ylä: 0), 700, "easeOutBounce" $(this).children("div.desc").stop().animate(); ( alhaalla: 0), 700, "easeOutBounce"); this).children("div.desc").stop().animate((bottom: -40), 400 )); $(.title, .desc").hover(function() ( $( this) .stop().animate((backgroundColor: "#444"), 700, "easeOutSine"); ;

Se voi näyttää hieman monimutkaiselta, mutta se ei todellakaan ole sitä. Katsotaanpa jokaista osaa.

Tämän vaikutuksen taustalla oleva logiikka on hyvin yksinkertainen. Koska sijoitimme elementit ehdottomasti, piilotamme ne ensin kuvalohkon ulkopuolelle. Kun viemme hiiren kuvien päälle, meidän on vain palautettava ne takaisin alkuperäiseen asentoonsa.

Ensin siirrämme otsikon ja kuvauksen päälohkon ulkopuolelle. Mutta CSS:n sijaan teemme sen JavaScriptin avulla erityisistä syistä. Vaikka JS on poistettu käytöstä, sivu toimii edelleen. Otsikko ja kuvaus pysyvät kuvan päällä ja näkyvät ikään kuin hover-tehostetta olisi käytetty. Mutta jos piilottaisimme nämä lohkot CSS:n avulla, ja JS sivulla olisi poistettu käytöstä, ne eivät olisi koskaan näkyneet näytöllä.

Koodimme alkaa luomalla hover-funktio jokaiselle elementille. Ensimmäinen toiminto suoritetaan, kun hiirtä pidetään, toinen - päinvastoin, kun se vedetään sisään.

Toiminnon sisällä tämä viittaa elementtiin, joka aiheutti tapahtuman. Käytämme animaatiomenetelmää vastaavien arvojen muuttamiseksi. Käytämme myös helpotusta lisätäksemme vaikutuksemme vetovoimaa. Kun siirrämme hiiren pois, muutamme arvot yksinkertaisesti alkuperäiseen tilaan.

Pienen lisäyksenä, jos viet hiiren otsikon tai kuvauslohkon päälle, ne vaihtavat hitaasti väriä jQuery-käyttöliittymän ansiosta.

Siinä kaikki, tehostemme on valmis käytettäväksi. Voit katsoa annettuja esimerkkejä ja niiden kanssa.

Animaatio tapahtuu elementtien CSS-ominaisuuksien tasaisista muutoksista. Toiminnolla on kaksi käyttötarkoitusta:

ominaisuuksia
kesto — animaation kesto. Voidaan määrittää millisekunteina tai merkkijonoarvona "fast" tai "slow" (200 ja 600 millisekuntia).
keventäminen — muuta animaation nopeutta (hidastuuko se suorituksen loppua kohti tai päinvastoin nopeutuu). (katso kuvaus alla)
takaisinsoitto on toiminto, jota kutsutaan, kun animaatio on valmis.

ominaisuudet - luettelo animaatioon liittyvistä CSS-ominaisuuksista ja niiden lopulliset arvot. (katso kuvaus alla)
vaihtoehdot - lisävaihtoehtoja. Sen on esitettävä objektilla muodossa option:value. Vaihtoehdot:

kesto— animaation kesto (katso edellä). helpotus— muuttaa animaation nopeutta (hidastuuko se suorituksen loppua kohti tai päinvastoin, nopeutuuko se). (katso kuvaus alla) saattaa loppuun— toiminto, jota kutsutaan animaation päätyttyä. askel— toiminto, jota kutsutaan jokaisen animaatiovaiheen jälkeen. jonottaa- Boolen arvo, joka osoittaa, pitäisikö nykyinen animaatio sijoittaa funktiojonoon. Jos epätosi , animaatio alkaa välittömästi ilman jonotusta. erityinenEasing- voit asettaa erilaisia ​​helpotusarvoja eri CSS-parametreille. Objektin määrittämä muodossa parametri:arvo. Vaihtoehto lisättiin jQuery 1.4:ään. Useiden animaatioiden esittäminen

Kun useita efektejä kutsutaan samanaikaisesti yhden elementin suhteen, niiden toteutus ei tapahdu samanaikaisesti, vaan peräkkäin. Esimerkiksi kun suoritat seuraavat komennot:

$("#oma-div" ) .animate (( korkeus: "piilota" ) , 1000 ) ; $("#oma-div" ) .animate (( korkeus: "show" ) , 1000 ) ;

elementti tunnuksella my-div, katoavat aluksi tasaisesti näytöltä ja alkavat sitten näkyä tasaisesti uudelleen. Eri elementeille asetettavat animaatiot suoritetaan kuitenkin samanaikaisesti:

$("#oma-div-1") .animate (( korkeus: "piilota" ) , 1000 ) ; $("#oma-div-2") .animate (( korkeus: "show" ) , 1000 ) ;

ominaisuudet -parametri

Asettaa objektin muodossa css-property:arvo. Tämä on hyvin samanlaista kuin parametriryhmän määrittäminen .css()-menetelmässä, mutta ominaisuuksilla on laajempi arvotyyppien valikoima. Ne voidaan määrittää paitsi tuttujen yksiköiden muodossa: numerot, pikselit, prosentit jne., vaan myös suhteellisesti: (korkeus:"+=30", vasen:"-=40") (lisää korkeutta 30 pikseliä ja siirrä oikealle 40). Lisäksi voit asettaa "piilota", "näytä", "toggle"-arvot, jotka piilottavat, näyttävät tai kääntävät elementin näkyvyyden sen parametrin mukaan, johon niitä sovelletaan. Esimerkiksi

$("div" ) .animate ( ( peittävyys: "piilota" , korkeus: "piilota" ) , 5000 ) ;

Piilottaa div-elementit vähentämällä läpinäkyvyyttä ja alentamalla elementin korkeutta (tiivistystä).

Huomautus 1: Huomaa, että ominaisuusparametrissa voit määrittää vain ne CSS-ominaisuudet, jotka on määritetty käyttämällä numeerisia arvoja. Esimerkiksi taustaväri-ominaisuutta ei pitäisi käyttää.

Muistio 2: Arvot, jotka on kirjoitettu css:ssä yhdysviivalla, on määritettävä ilman sitä (ei marginaalivasen, vaan marginaalivasen).

Animaation viimeistelykäsittelijä

Animaation viimeistelykäsittelijäksi määritetty funktio ei saa mitään parametreja, mutta funktion sisällä tämä muuttuja sisältää animoitavan elementin DOM-objektin. Jos tällaisia ​​elementtejä on useita, käsittelijä kutsutaan erikseen jokaiselle elementille.

helpotusparametri

Tämä parametri määrittää animaation dynamiikan - hidastuuko se, nopeutuuko, tasaisesti vai jotain muuta. Helpotusparametri asetetaan toiminnolla. Tavallisessa jQueryssa on käytettävissä vain kaksi tällaista toimintoa: "lineaarinen" ja "swing" (yhtenäistä animaatiota ja kiihdytystä varten). Oletuksena helpotus on yhtä kuin "swing" . Muita vaihtoehtoja löytyy laajennuksista, esimerkiksi jQuery UI tarjoaa yli 30 uutta kaiutinta.

On mahdollista asettaa erilaisia ​​helpotusarvoja eri CSS-ominaisuuksille suoritettaessa yhtä animaatiota. Tätä varten sinun on käytettävä animate()-funktion toista vaihtoehtoa ja asetettava specialEasing-vaihtoehto. Esimerkiksi:

$("#clickme" ) .click (funktio () ( $("#book" ) .animate (( läpinäkyvyys: "toggle" , korkeus: "toggle" ) , ( kesto: 5000 , specialEasing: ( läpinäkyvyys: "lineaarinen" " , korkeus: "keinu" ) ) ; ) ) ;

Tässä tapauksessa läpinäkyvyyden muutos tapahtuu tasaisesti (lineaarinen) ja korkeus muuttuu alussa kiihtyvällä ja lopussa lievällä hidastuksella (heilahdus).

Toiminnassa

Kun painiketta napsautetaan, teemme elementillä joitain manipulaatioita animaatiomenetelmällä:

~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~style~gt~ div ( taustaväri:#bca; leveys: 100px; reunus: 1px tasainen vihreä; ) ~lt~/style~gt~ ~lt~script src="http://code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~ ~lt~/head~ gt~ ~lt~body~gt~ ~lt~button id="go"~gt~" Syö piirakka~lt~/button~gt~ ~lt~div id="block"~gt~Alice~lt~/ div ~gt~ ~lt~script~gt~ // Muutetaan useita css-arvoja yhden animaation aikana. $("#go").click(function())( $("#block").animate(( leveys: "70%", // leveys on 70 % peittävyys: 0,4, // läpinäkyvyys on 40 % marginLeft: "0.6in", // elementin vasemman reunan sisennykseksi tulee 6 tuumaa fontSize: "3em", // kirjasinkoko kasvaa 3 kertaa borderWidth: "10px" // reunuksen paksuus tulee 10 pikseliä), 1500 esiintyy 1,5 sekunnin ajan)); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~

Linkit

Hakuavaimet:

• mukautettu animaatio
• animaation esittäminen
• käyttäjän määrittelemä animaatio
• käyttäjän määrittämiä tehosteita
• .animate()
• animoida ()

JQuery on erinomainen kirjasto, joka on monipuolistunut huomattavasti viime vuodet kehittäjien lähestymistapoja kohtaamiensa ongelmien ratkaisemiseen. Kun jQuery CSS ei pystynyt luomaan monimutkaisia ​​animaatioita; Niiden luomiseen käytettiin JavaScriptiä. jQuery on tehnyt animaatioiden luomisesta paljon helpompaa. Kirjasto sisältää yksinkertaisia ​​animaatioita (fadeIn(), hide(), slideDown() ja mahdollistaa minkä tahansa animaation luomisen animate()-menetelmällä. Tämä artikkeli on omistettu tämän menetelmän kuvaukselle.

jQuery animate() on kääremenetelmä, mikä tarkoittaa, että se toimii ennalta valitun joukon DOM-elementtejä, jotka on kääritty jQueryyn. Menetelmän avulla voit soveltaa vaadittuja animaatiotehosteita joukon elementteihin. Yllämainittujen toteuttaminen käytännössä on mahdollista CSS-ominaisuuksien joukon ja niiden arvojen ansiosta, joita nämä ominaisuudet saavat animaation valmistuttua. Väliarvot, jotka tyylillä on saavutettaessa haluttu tehoste (automaattisesti animaatiomoottorin ohjaama), määräytyvät tehosteen keston ja -easing-toiminnon perusteella; Näitä kahta vaihtoehtoa käsitellään jäljempänä.

Animoitavien CSS-ominaisuuksien luettelo on rajoitettu niihin, jotka voivat ottaa numeerisia arvoja. Arvot voivat olla absoluuttisia (esimerkiksi 200) tai suhteellisia. Absoluuttisille arvoille jQueryn oletusyksikkö on pikseliä. Voimme käyttää myös tiettyjä yksiköitä: em, rem tai prosentti. Suhteellisten arvojen määrittämiseen käytetään etuliitteitä += tai -=; etuliitteet ohjaavat kohdesuhteellisen arvon positiiviseen tai negatiiviseen suuntaan, vastaavasti.

Animate()-menetelmän parametrit ja allekirjoitus

Menetelmällä on kaksi päämuotoa; Useimmat käytetyt parametrit ovat valinnaisia ​​(hakasulkeissa).

• animoida(ominaisuudet[, kesto][, helpotus][, takaisinsoitto])
• animoida (ominaisuudet[, asetukset])

Itse asiassa parametrit:

• ominaisuudet (Object): luettelo css-ominaisuuksista, jotka sisältävät animaation lopussa saavutetut arvot.
• kesto (Number|String): Tehosteen kesto millisekunteina tai yksi esiasetetuista merkkijonoista: "slow" (600 ms), "normaali" (400 ms) tai "fast" (200 ms). Oletusarvo on "normaali".
• easing (String): Siirtymän aikana käytetyn helpotustoiminnon nimi (joka määrittää animaation nopeuden muutoksen). Oletusarvo on "swing".
• takaisinsoitto (toiminto): Toiminto, joka suoritetaan animaation päätyttyä jokaiselle animoidulle elementille.
• Options (Object): objekti, joka sisältää joukon ominaisuuksia (lisäasetuksia), jotka välitetään menetelmälle. Seuraavat ominaisuudet ovat saatavilla:
  • aina (toiminto): Funktio, jota kutsutaan, kun animaatio päättyy tai kun animaatio pysäytetään (mutta ei valmis).
  • valmis (toiminto): Toiminto, joka suoritetaan, kun animaatio on valmis.
  • done (Function): Funktio, joka kutsutaan, kun animaatio on valmis.
  • kesto (merkkijono|numero): kuvattu yllä.
  • helpotus (String): edellä kuvattu.
  • epäonnistua (toiminto): suoritetaan, kun epäonnistunut yritys animaatioita.
  • edistyminen (toiminto): Suoritetaan jokaisen animaatiovaiheen jälkeen. Kutsutaan kerran jokaiselle elementille animaation päätyttyä.
  • queue (Boolean): milloin animaatio tulee sijoittaa tehostejonoon (tiedot alla). Oletusarvo on tosi.
  • specialEasing (Object): objekti, jonka parametrit ovat css-ominaisuuksia, joiden arvot ovat siirtymäfunktioita
  • aloitus (toiminto): Suoritetaan, kun animaatio alkaa tapahtua.
  • vaihe (Function): Funktio, jota kutsutaan kunkin animoidun elementin jokaiselle animoidulle ominaisuudelle.

Termiä easing käytetään kuvaamaan tekniikkaa, joka ohjaa käsittelyä ja asettaa animaation kuvanopeuden. Animaatio suoritetaan peräkkäin, jos jonoasetuksen arvo on tosi, ja rinnakkain (ilman jonoa), jos sen arvo on epätosi.

Esimerkkejä animate()-menetelmän käytöstä

Laitetaan tämä menetelmä käytäntöön. Huomaa, että tällä menetelmällä luotuja monimutkaisia ​​animaatioita suoritettaessa saattaa ilmetä virheitä. Eli erittäin monimutkaisille animaatioille tätä menetelmää on parasta välttää.

Yksittäinen animaatio

Yhden animaation luominen on erittäin yksinkertaista, vain yksi puhelu riittää. Sinun on esimerkiksi siirrettävä elementti lohkon toiselta puolelta toiselle. Tämän animaation havainnollistamiseksi luodaan kaksi div-elementtiä, toinen toisensa sisään. Tyyli on seuraava: sisemmän div:n tausta on punainen. Koodi:

HTML CSS .reectangle ( leveys: 300px; korkeus: 20px; näyttö: lohko; sijainti: suhteellinen; reunus: 1px tasainen musta; marginaali: 20px 0; ) .square-small ( näyttö: lohko; leveys: 20px; korkeus: 20px; sijainti: absoluuttinen taustaväri: punainen)

Käytetään animaatiota () ja siirretään pieni neliö puolelta toiselle:

jQuery $(.reectangle") .find(".square-small") .animate(( vasen: 280 ), "hidas");

Vain vasen ominaisuus on animoitu. Animaation kesto on esiasetettu arvo hidas (600 ms). Sisäinen (jonka luokka on .square-small) liikkuu itseisarvon avulla. Arvo valitaan yllä olevan CSS-koodin määrittämän säilön leveyden perusteella. Tämä ratkaisu on kaukana ihanteellisesta. Joten jos muutat säiliön leveyttä, sisempi ei pääse toiselle puolelle (jos leveyttä kasvatetaan) tai ohittaa sen (jos leveyttä pienennetään). Tämän välttämiseksi vasen ominaisuus on asetettava arvoon, joka riippuu nykyisen sisä- ja ulkoleveyden laskennasta:

jQuery vasemmalle: $(".rectangle").width() - $(".rectangle").find(.square-small").width() Suorita useita animaatioita silmukassa

Animaatiosarjan suorittaminen yhdelle elementille tai elementtijoukolle ei ole vaikeampaa kuin sarjan (ketjun) luominen kutsujen animate()-menetelmälle. Siirretään pieni neliö uudelleen; hän liikkuu kehän ympäri tiimalasi, joka sijaitsee suuren neliön (ei suorakulmion) sisällä. Käytämme demon luomiseen seuraavaa merkintää:

HTML

.square-smallille käytämme annettua CCS-koodia edellisestä esimerkistä. Ulompi neliön tyyli:

CSS .square-big (leveys: 300px; korkeus: 300px; näyttö: lohko; sijainti: suhteellinen; reunus: 1px tasainen musta; marginaali: 20px 0; )

Viimeinen vaihe on kirjoittaa JavaScript-koodi neljälle riville, jotka muodostavat tiimalasin kehän. Pieni neliö animoidaan sen sijainnista ulomman neliön ylä- ja vasemmassa reunassa, kunnes se saavuttaa suuren neliön oikean alakulman. Luomiseen haluttu vaikutus pienen neliön tulee liikkua vinosti. Kun se saavuttaa oikean alakulman, se on siirrettävä vasempaan alakulmaan, sitten oikeaan yläkulmaan ja lopuksi aloitusasentoon.

Nyt silmukoidaan animaatio, eli tehdään se niin, että animaation loputtua se alkaa uudestaan. Tätä varten voimme kääriä kutsun neljälle animate()-funktiolle funktion sisällä, joita puolestaan ​​kutsutaan toisen funktion sisällä. Eli luomme funktion, johon voidaan viitata. Voimme sitten käyttää koko toimintoa ja käynnistää animaation uudelleen viimeisen vaiheen jälkeen.

jQuery (funktioanimaatio() ( var options = ( kesto: 800, easing: "lineaarinen" ); $(.square-big") .find(.square-small") .animate(( vasen: 280, ylhäällä : 280 ), vaihtoehdot).animate(( vasen: 0, ), vaihtoehdot).animate(( vasen: 280, ylhäällä: 0, ), vaihtoehdot).animate(( vasen: 0, ), $.extend(true, (), valinnat, ( täydellinen: function() ( animaatio(); ) )));

Huomaa, että kutsuttaessa animate() ei tarvitse kirjoittaa samoja parametreja useita kertoja, vaan valitsimen muuttujaa käytettiin. Lisäksi viimeisessä vaiheessa käytämme complete()-funktiota JQuery extend()-menetelmällä.

Lisää ominaisuuksia soita takaisin

Aivan kuten meillä viimeinen esimerkki Asetetaan aloitus-, lopetus- ja edistymisominaisuudet Options-parametrilla (toinen parametri toisesta lomakkeesta). Tavoitteena on poistaa animaation käynnistävä painike käytöstä, kun animaatio on (jo) valmis. Toinen tehtävä on näyttää prosentteina, mikä osa animaation kokonaismäärästä valmistui. Tässä esimerkissä käytämme ensimmäistä demoa, johon on tehty tarvittavat muutokset.

Jotta prosenttiosuudet voidaan näyttää, luomme painikkeen ja elementin (span). Merkintä:

HTML Run! 0 %

Tyyli ei muutu, joten siirrytään heti JavaScript-koodin keskusteluun. Jotta animaatio toimisi vain, kun painiketta napsautetaan, luomme käsittelijän painikkeen napsautustapahtumalle. Käsittelijän sisällä painike otetaan käyttöön ja poistetaan käytöstä käyttämällä jQuery prop() -menetelmää ( prop on jquery.page2page). Menetelmä perustuu siihen, suoritetaanko animaatio sisään Tämä hetki tai se on jo valmis. Lopuksi käytetään edistymismenetelmän toista argumenttia, joka puolestaan ​​on optionobjektin ominaisuus; Hän näyttää prosentteina(animaation yleisestä toteutuksesta). Koodi:

jQuery $("#animation-button").click(function() ( var $button = $(this); $(".suorakulmio") .find(.square-small") .animate(( vasen: 280 ), ( kesto: 2000, aloitus: function() ( $button.prop("disabled", true); ), suorita: function() ( $button.prop("disabled", false); ), edistyminen: function (animaatio, edistyminen) ( $("#prosentti").teksti(Math.round(progress * 100)); ) )); Johtopäätös

jQuery animate() -menetelmää tarkasteltiin, sen allekirjoitus ja sen hyväksymät parametrit esitettiin. Artikkelissa annettiin kolme esimerkkiä animaation käytöstä. Animate():n ominaisuudet ovat tietysti paljon laajemmat kuin tässä käsitellyt. Jos vaivaat ja olet luova animaatiosi kanssa, tulokset voivat olla todella vaikuttavia. Kuten esimerkiksi tämä jQuery-laajennus Audero Smoke Effect, joka luo savuefektin yhdelle tai useammalle web-sivun elementille (yleensä kuville).

Tallenna tämä sivu testataksesi alla olevia esimerkkejä.

Suurin osa jQueryyn liittyvistä käyttöliittymän toiminnoista sisältyy jQueryn käyttöliittymäkirjastoon, mutta osa niistä sisältyy silti ydinkirjastoon yksinkertaisia ​​tehosteita ja animaatiotyökalut. Huolimatta siitä, että kutsuin niitä yksinkertaisiksi, niitä voidaan käyttää melko monimutkaisten efektien toteuttamiseen. Nämä työkalut on tarkoitettu ensisijaisesti elementtien näkyvyyden animointiin, mutta niitä voidaan käyttää myös useiden CSS-ominaisuuksien animointiin monin eri tavoin.

Useimpien perustehosteiden tarkoitus on yksinkertaisesti näyttää tai piilottaa elementtejä. Tähän tarkoitukseen käytetyt menetelmät on kuvattu alla olevassa taulukossa:

Perustehosteiden luomismenetelmät Menetelmän kuvaus

piilottaa()	Piilottaa välittömästi kaikki jQuery-objektin sisältämät elementit
piilottaa (kesto), piilottaa (kesto, tyyli)	Piilottaa asteittain jQuery-objektin sisältämät elementit tietyksi ajaksi, jolloin voidaan määrittää animaatiotyyli
piilota (kesto, toiminto), piilota (kesto, tyyli, toiminto)	Piilottaa kaikki jQuery-objektin sisältämät elementit tietyksi ajaksi ja voi määrittää animaatiotyylin ja toiminnon, joka kutsuu tehosteen valmistuttua.
näytä()	Renderöi välittömästi kaikki jQuery-objektin sisältämät elementit
show(kesto), show(kesto, tyyli)	Näyttää kaikki elementit, jotka sisältyvät jQuery-objektiin tietyn ajan, ja voi määrittää animaatiotyylin
show(kesto, toiminto), show(kesto, tyyli, toiminto)	Näyttää kaikki jQuery-objektin sisältämät elementit tietyn ajan, ja se voi määrittää animaatiotyylin ja toiminnon, joka kutsuu tehosteen valmistuttua
vaihtaa()	Vaihtaa välittömästi (näyttää, jos piilotettu, piilottaa jos näytetään) jQuery-objektin sisältämien elementtien näkyvyyden
vaihtaa (kesto), vaihtaa (kesto, tyyli)	Vaihtaa jQuery-objektin sisältämien elementtien näkyvyyttä tietyn ajan ja voi määrittää animaatiotyylin
vaihtaa (kesto, toiminto), vaihtaa (kesto, tyyli, toiminto)	Vaihtaa jQuery-objektin sisältämien elementtien näkyvyyttä tietyksi ajaksi ja voi määrittää animaatiotyylin ja toiminnon, joka kutsuu tehosteen valmistuttua.
toggle(boolean_value)	Suorittaa jQuery-objektin sisältämien elementtien näkyvyyden yksisuuntaisen vaihdon

Alla on esimerkki show()- ja hide()-menetelmien käyttämisestä ilman argumentteja yksinkertaisten tehosteiden luomiseen:

$(function() ( $("HideShow").appendTo("#buttonDiv") .click(function(e) ( if ($(e.target).text() == "Piilota") ( $(" #rivi1 div.dcell").piilota(); ) else ( $("#row1 div.dcell").show(); ) e.preventDefault(); )); )); Suorita esimerkki

Tässä skenaariossa kaksi painiketta (painikeelementtiä) luodaan DOM-käsittelyn avulla ja tarjotaan toiminto, joka tulee kutsua, kun jompaakumpaa painiketta napsautetaan. Tämä toiminto määrittää text()-menetelmällä, mitä painiketta napsautettiin, ja tästä riippuen kutsuu joko show()- tai hide()-menetelmää.

Molemmissa tapauksissa määritettyä funktiota kutsutaan #row1 div.cell -valitsimella luodun jQuery-objektin menetelmänä. Näin ollen ne dcell-luokkaan kuuluvat div-objektit, jotka ovat jälkeläisiä elementistä, jonka id-attribuutti on yhtä suuri kuin rivi1, tulevat näkymättömiksi tai näkyviksi.

Tässä tapauksessa elementtien siirtyminen tilasta toiseen tapahtuu välittömästi, ilman animaatiota. Siinä ei ole viiveitä tai tehosteita, ja kaikki elementit näkyvät tai katoavat välittömästi napsautuksen jälkeen. Hide():n kutsuminen elementeille, jotka on jo tehty näkymättömiksi, tai show():n kutsuminen elementeille, jotka on jo tehty näkyviksi, ei vaikuta. Lopuksi huomaa, että kun piilotat tai näytät elementin, myös kaikki sen jälkeläiset piilotetaan tai näytetään.

Vaihtoelementtien näkyvyys

Elementtien siirtämiseen näkyvästä tilasta näkymätön tilaan ja päinvastoin käytetään toggle()-menetelmää. Alla on vastaava esimerkki:

$(function() ( $("Toggle").appendTo("#buttonDiv") .click(function(e) ( $("div.dcell:first-child").toggle(); e.preventDefault() ; )); Suorita esimerkki

Tässä esimerkissä lisäämme asiakirjaan yhden painikkeen, jota napsautettuna se kutsuu toggle()-menetelmää, mikä muuttaa niiden näkyvyyttä. div elementtejä.dcell, jotka ovat ensimmäiset lapsielementtejä vanhempasi.

Huomaa dokumenttirakenteen romahtaminen piilotettujen elementtien ympärillä. Jos haluat piilottaa elementtejä niin, että niiden käyttämä alue näkyy sivulla, aseta CSS-näkyvyysominaisuuden arvoksi piilotettu.

Elementin näkyvyyden yksisuuntainen vaihto

Loogisen (Boolen) arvon välittäminen toggle()-menetelmälle mahdollistaa rajoitusten asettamisen elementtien näkyvyystilan muutossuuntiin. Jos välität argumenttina toggle()-metodiin totta, tämä johtaa vain piilotettujen elementtien näyttämiseen (kun taas näkyviä elementtejä ei piiloteta). Epätosin antamisella on päinvastainen vaikutus: näkyvät elementit piilotetaan, mutta piilotetut elementit eivät tule näkyviin.

Minun on myönnettävä, etten näe tätä parannuskeinoa suuri hyöty ja sisällytti sen huomioon ainoastaan ​​esityksen täydellisyyden vuoksi.

Elementin näkyvyysanimaatio

Elementtien näyttämis- ja piilotusprosessia voidaan animoida välittämällä parametri show(), hide() tai toggle()-metodille, joka määrittää animaation keston. Tässä tapauksessa elementtien piilottaminen tai näyttäminen tapahtuu sujuvasti määritetyn ajanjakson aikana. Mahdolliset vaihtoehdot Animaatiojakson kestoasetukset on lueteltu alla olevassa taulukossa:

Alla on esimerkki elementtien näyttämisen ja piilottamisen animaatiosta. Tässä esimerkissä animaation siirtymän keston asettamiseksi käytämme merkkijonoparametria fast, jolla osoitamme, että 600 ms on varattu asiakirjan img-elementtien näkyvyyden vaihtamiseen:

$(function() ( $("Toggle").appendTo("#buttonDiv") .click(function(e) ( $("img").toggle("nopea", "lineaarinen"); e.preventDefault( )); Suorita esimerkki

Kun määrität animaatiojakson kestoa millisekunteina, älä kirjoita arvoa lainausmerkkeihin. Sinun tulisi esimerkiksi käyttää merkintää $("img").toggle(500) eikä $("img").toggle("500"). Jos lainausmerkkejä on, määritetty arvo ohitetaan ja sen sijaan käytetään sisäistä oletusarvoa.

Kun kutsumme toggle()-menetelmää tässä skriptissä, välitämme sille myös lisäargumentin, jota kutsutaan helpotusfunktioksi tai easing styleiksi, joka asettaa halutun animaatiotyylin.

Pehmennys tarkoittaa tässä animaation siirtymän pehmentämistä säätämällä sen nopeutta animaation edetessä. Saatavilla on kaksi esiasetettua pehmennystyyliä: keinu Ja lineaarinen. Swing-tyyli aloittaa animaation hitaasti, nopeuttaa sitä ja hidastaa sitä uudelleen animaation lopussa. Lineaarinen tyyli vastaa tasainen vauhti animaatioita koko prosessin ajan. Jos tämä argumentti jätetään pois, oletusarvo on swing.

Takaisinsoittotoimintojen käyttäminen tehosteissa

Show(), hide() ja toggle()-menetelmät voidaan välittää argumenttina funktiolle, jota kutsutaan, kun animaatio päättyy. Tätä ominaisuutta voidaan käyttää muiden elementtien tilan päivittämiseen vastaamaan niiden tilan muutoksia, kuten alla olevassa esimerkissä näkyy:

Change").insertAfter("#buttonDiv-painike") .click(function(e) ( hideVisibleElement(); e.preventDefault(); )); function hideVisibleElement() ( $(visibleRow).hide("fast", showHiddenElement ) ) function showHiddenElement() ( $(hiddenRow).show("fast", switchRowVariables); ) function switchRowVariables() ( var temp = piilorivi; piilorivi = näkyväRivi; näkyväRivi = temp; ) ));

Tämän esimerkin selventämiseksi tehosteen toiminnallisuus on jaettu useisiin erillisiin toimintoihin. Ensin piilotetaan yksi div-elementeistä, joka toimii elementtitaulukon rivinä luodussa sivuasettelussa CSS-tyylejä, ja määrittele kaksi muuttujaa, joiden avulla seuraamme, mikä rivi on näkyvä ja mikä näkymätön.

Seuraavaksi dokumenttiin lisätään painike (painikeelementti), jonka napsautuksen jälkeen kutsutaan hideVisibleElement()-funktio, joka käyttää hide()-menetelmää animoimaan näkyvän elementtirivin piiloutumisen. Tässä tapauksessa määritämme funktion nimen, joka tulee kutsua tehosteen päätyttyä, tässä tapauksessa showHiddenElement.

Tämä funktio käyttää show()-menetelmää elementtien näkyvyyden palauttamiseen. Jälleen kerran määritämme tässä funktion, joka tulee kutsua, kun tehoste on valmis. Tässä tapauksessa elementtien näkyvyyttä seuraava switchRowVariables()-funktio mahdollistaa animaation lisäämisen haluttuihin elementteihin seuraavan kerran, kun napsautat painiketta.

Nyt kun napsautat painiketta, näkyviin tulee piilotettu rivi nykyisen rivin sijaan ja animaatio suoritetaan nopeasti, jotta sivun pitkä siirtyminen tilasta toiseen ei ärsytä käyttäjää.

Siirtymäprosessi on sujuvaa, eikä CSS-taulukon asettelu häiritse, koska se ei koske yksittäisiä soluja, vaan taulukon rivejä kokonaisuutena. Yleensä tehoste on tarpeen jakaa erillisiin toimintoihin, kuten tehtiin tässä esimerkissä, ei tapahdu. Alla olevassa esimerkissä näkyy sama esimerkki, joka on muutettu kompaktimpaan muotoon käyttämällä joukko sisäänrakennettuja toimintoja:

$(function() ( var hiddenRow = "# rivi2"; var näkyväRivi = "#rivi1"; $(hiddenRow).hide(); $("Muuta").insertAfter("#buttonDiv-painike") .click(function (e) ( $(visibleRow).hide("nopea", function() ( $(hiddenRow).show("nopea", function() ( var temp = piilorivi; piilorivi = näkyväRivi; näkyväRivi = temp; )); )); e.preventDefault( ));

Elementtien korkeuden tasaisten muutosten vaikutukset

jQuery-kirjastossa on useita menetelmiä, jotka on suunniteltu luomaan tehosteita elementeille, jotka laajenevat ja kutistuvat tasaisesti muuttamalla niiden korkeutta (niin sanotut liukuvat tehosteet). Nämä menetelmät on lueteltu alla olevassa taulukossa:

Nämä menetelmät animoivat elementtien pystysuuntaiset mitat. He ottavat samoja argumentteja kuin perustehostemenetelmät. Voit antaa niille tehosteen keston, pehmennystyylin ja takaisinsoittotoiminnon argumentteina valitsemalla sinulle sopivan soittovaihtoehdon. Vastaava esimerkki on alla olevassa esimerkissä:

$(function() ( $("Collapse Expand").insertAfter("#buttonDiv-painike") .click(function(e) ( $("h1").slideToggle("fast"); e.preventDefault(); )); Suorita esimerkki

Tämä esimerkki käyttää slideToggle()-menetelmää saadakseen h1-elementin häipymään sisään ja ulos muuttamalla sen korkeutta.

Elementtien läpinäkyvyyden tasaisten muutosten vaikutukset

Tämä osio kattaa tekniikat elementtien liukenemistehosteiden luomiseksi, joita käytetään elementtien näyttämiseen ja piilottamiseen muuttamalla niiden peittävyyttä (tai halutessasi muuttamalla niiden läpinäkyvyyttä). Nämä menetelmät on lueteltu alla olevassa taulukossa:

Menetelmät liukenevien vaikutusten luomiseen Menetelmän kuvaus

fadeOut(), fadeOut(kesto), fadeOut(kesto, toiminto), fadeOut(kesto, tyyli, toiminto)	Piilottaa elementit vähentämällä niiden peittävyyttä
fadeIn(), fadeIn(kesto), fadeIn(kesto, funktio), fadeIn(kesto, tyyli, funktio)	Näytä elementit lisäämällä niiden peittävyyttä
fadeTo(kesto, peittävyys), fadeTo(kesto, opasiteetti, tyyli, toiminto)	Muuttaa opasiteetin määritetylle tasolle
fadeToggle(), fadeToggle(kesto), fadeToggle(kesto, funktio), fadeToggle(kesto, tyyli, funktio)	Vaihtoehtoisesti näytä ja piilota elementtejä käyttämällä läpinäkyvyyttä

FadeIn() , fadeOut() ja fadeToggle() menetelmissä käytetyt parametrijoukot ovat samanlaisia ​​kuin muissa tehosteita luovissa menetelmissä käytetyt parametrijoukot. Kun näitä menetelmiä kutsutaan, niille voidaan välittää parametreja, kuten animaation kesto, animaatiotyyli ja takaisinsoittotoiminto, kuten edellisissä esimerkeissä on osoitettu.

Alla on esimerkki läpinäkyvyystehosteiden käytöstä:

$(function() ( $("Toggle").insertAfter("#buttonDiv-painike") .click(function(e) ( $("img").fadeToggle(); e.preventDefault(); )); ) ); Suorita esimerkki

FadeToggle()-menetelmää käytetään tässä img-elementteihin osittain tämän vaikutuksen rajoitusten osoittamiseksi. Toisin kuin muut tehosteet, jotka myös muuttavat valittujen elementtien kokoa, läpinäkyvyystehoste vaikuttaa vain peittävyysasetuksiin. Tämä tarkoittaa, että fade()-menetelmät tarjoavat sujuva animaatio vain kunnes elementit ovat täysin läpinäkyviä, jolloin jQuery piilottaa ne ja sivun asettelu muuttuu harppauksin. Joissakin tilanteissa tämä sivun käyttäytyminen voi ärsyttää käyttäjiä.

Animoi läpinäkyvyys tiettyyn arvoon

Jos haluat luoda animaation, joka pysähtyy, kun läpinäkyvyys saavuttaa tietyn arvon, käytä fadeTo()-menetelmää. Opacity-parametri voi saada arvoja välillä 0 (täysin läpinäkyvä) 1:een (täysin läpinäkymätön). Tässä tapauksessa elementtien näkyvyysominaisuus ei muutu, minkä ansiosta voit välttää askeleen muutos edellä mainittu sivuasettelu.

Alla on esimerkki fadeTo()-menetelmän käytöstä:

$(function() ( $("Kuvien häivytys").insertAfter("#buttonDiv-painike") .click(function(e) ( $("img").fadeTo("fast", 0); e.preventDefault( )); Suorita esimerkki

Tässä esimerkissä määritimme, että elementtien opasiteetin tulee pienentyä, kunnes niistä tulee täysin läpinäkyviä. Tässä tapauksessa tuotettu tehoste on sama kuin käytettäessä fadeOut()-menetelmää, mutta elementit eivät ole piilossa, kun animaatiosiirtymä on valmis.

Opasiteettia ei tarvitse vähentää nollaan. Voit määrittää tälle parametrille minkä tahansa muun arvon sallitulla alueella (0 - 1).

Tässä artikkelissa käsittelemme jQuery-animaatioiden perusteita, jotta voit käyttää sitä monimutkaisten sivujen suunnitteluun. Animaatio on interaktiivisten web-suunnitteluelementtien perustoiminto.

Verkkosivujen suunnittelulla on tärkeä rooli vierailijoiden houkuttelemisessa jatkuvasti. Interaktiivinen suunnittelu herättää enemmän huomiota kuin tavallinen staattinen suunnittelu.

Tekniikka kehittyy nopeasti vastaamaan nykyaikaisen web-suunnittelun tarpeita. Tämän seurauksena CSS3 tarjoaa animaatiototeutuksen ilman JavaScript ohje. Vaikka CSS3 ja HTML5 kehittyvät jatkuvasti, jQuery on edelleen suosittu menetelmä interaktiivisen suunnittelun luomiseen.

Aloitetaan!

Animaatioiden käytännöllinen käyttö jQueryssä

jQueryä käytetään laajalti vuorovaikutteisten elementtien, kuten liukusäätimien, valikoiden, vieritysten ja muiden kehittämiseen. Ennen kuin siirrymme itse animaatioon, ehdotan, että katsot seuraavaa käytännön esimerkkejä toteutuksia, jotka kuvaavat jQuery-animaatioiden tehoa.

• Sivu liukuminen vierittäessä;
• Kuvakehysten yhdistäminen jQueryn avulla;
• Animaatio "Night Dreams";
• Animoi verhon aukko jQueryn avulla;
• Liukuvan navigointivalikon luominen jQuerylla.

Aloittelijana et voi heti toistaa, mitä näissä esimerkeissä on annettu. Siksi seuraavaksi tarkastellaan animaation perusteita jQueryssä aloittelijan näkökulmasta.

Lataa lähdekoodien demo

Johdatus jQuery Animation Basicsiin

Useimmilla suunnittelijoilla on perustiedot jQuery- tai JavaScript-koodin kanssa työskentelystä. Elementin näkyvyyden muuttaminen on yleinen tehtävä, jota esiintyy lähes kaikilla verkkosivustoilla.

Voimme yksinkertaisesti piilottaa / näyttää elementin käyttämällä CSS-näyttö- tai näkyvyysattribuutteja. jQuery yksinkertaistaa prosessia ottamalla käyttöön kaksi toimintoa, piilota ja näytä. Harkitse seuraavaa koodia näyttääksesi ja piilottaaksesi HTML-elementin.

$("#paneeli").show(); $("#paneeli").hide();

Yllä olevaa koodia käyttämällä elementti ilmestyy ja katoaa välittömästi. Vierailemalla seuraavassa linkissä voit nähdä esittelyn tästä esimerkistä: http://jsfiddle.net/nimeshrmr/bMmFS/

Ihannetapauksessa haluamme tasoittaa elementtien piiloutumis- ja ilmestymisprosessia käyttämällä animaatioita käyttökokemuksen parantamiseksi. jQuery tarjoaa kaksi sisäänrakennettua menetelmää elementtien näyttämiseen ja piilottamiseen yksinkertaisilla animaatioilla.

• Liukeneminen – toteuttaa asteittaisen liukenemisprosessin HTML-elementti muuttamalla sen opasiteettiominaisuutta;
• Liukuva – toteuttaa HTML-elementin asteittaisen laajentamisen/supistumisen muuttamalla sen korkeutta.

Katsotaanpa, kuinka näiden tekniikoiden avulla voit näyttää ja piilottaa elementtejä animoiduilla tehosteilla.
jQuery kiteyttää animaation monimutkaisuuden tarjoamalla sisäänrakennettuja menetelmiä erilaisten web-suunnitteluongelmien ratkaisemiseen.

Liukeneminen

Liuottaminen toteutetaan yleensä fadeIn- ja fadeOut-funktioilla. Elementin opasiteettiominaisuutta lisää fadeIn-funktio ja pienentää fadeOut-funktio. Voimme myös ohittaa liukenemisaikavälin seuraavan esimerkin mukaisesti:

$("#paneeli").fadeIn("hidas"); $("#paneeli").fadeOut("nopea");

Meillä on mahdollisuus valita aikaväliksi ennalta määritetyt arvot hidas ja nopea. Voimme myös antaa useita millisekunteja määrittääksemme animaation keston. Tässä on linkki, joka havainnollistaa tätä esimerkkiä:
http://jsfiddle.net/nimeshrmr/zcRzL/

Lipsahdus

Liukutoiminnot muuttavat elementin korkeutta sen läpinäkyvyyden sijaan animaatiotehosteen saavuttamiseksi. Funktioilla on samanlainen syntaksi ja ne toimivat samalla tavalla kuin liukenemisfunktiot.

Tässä tapauksessa slideUpia käytetään piilottamaan ja slideDown näyttää elementtejä. Seuraava koodi näyttää perustavan käyttää liukutoimintoja:

$("#paneeli").slideDown("hidas"); $("#paneeli").slideUp("nopea");

Kestovaihtoehto toimii myös samalla tavalla kuin liukenemisfunktiot. Esittely liukutoimintojen käytöstä löytyy seuraavasta linkistä:
http://jsfiddle.net/nimeshrmr/nDz6J/

jQuery Animate Functionin käytön aloittaminen

Useimmat aloittelijat ajattelevat, että animaation kehittäminen on melko vaikea tehtävä. Se on varmasti vaikeaa, jos aloittaa uusi alku. jQuery kiteyttää kaiken monimutkaisuuden tarjoamalla yhden toiminnon, joka ohjaa kaikentyyppisiä animaatioita.

Yleisesti ottaen animaatio syntyy arvoja muuttamalla CSS-attribuutit. Kun olet viihtynyt jQuery-toiminto animoida, monimutkaisten animaatioiden rakentaminen on yksinkertainen tehtävä. Aloitetaan tarkastelemalla animointifunktiomallia:

$("#paneeli").animate(( // CSS:n ominaisuudet ja arvot), 5000, "lineaarinen", function() ( // Animaation viimeistely ));

Tämä koodi havainnollistaa kuvion animointitoiminnon käyttämiseen. Ensimmäinen parametri sisältää kaikki CSS:n ominaisuudet ja arvot.

Seuraava valinnainen parametri määrittää animaation keston. Kolmas parametri määrittää, kuinka animaatio venytetään (animaatiotyyppi), ja viimeinen parametri määrittää anonyymin funktion, jota kutsutaan animaation päättyessä.

Käyttömallin tarkastelun jälkeen voimme siirtyä luomaan jotain käytännöllistä jQuery-animaatiolla.

Kuvan osien animointi

Tässä osiossa tarkastellaan, kuinka voit näyttää kuvan käyttämällä animaatiota sen yksittäisiin osiin. Ensin meidän on jaettava kuva useisiin pieniin. Voit käyttää tässä artikkelissa esitettyä kuvanjakotekniikkaa: Palapelin luominen jQueryn ja PHP:n avulla.

Tässä on kuva, jota käytämme animaatiossa:

Tämän artikkelin lähdekoodeista löydät 12 kuvaa, jotka on saatu erotuksen jälkeen. Jokaisen kuvan koko on 150 x 150 pikseliä. Ne on jaettu kahteen 6 kappaleen riviin. Jokaisen rivin kaikki kuusi kuvaa sijoitetaan sivun oikeaan kulmaan käyttämällä seuraavaa koodia:

Tässä on 12 kuvaa järjestettynä kahteen riviin kahdella rivillä CSS-luokat img_item ja img_item2 . Katsotaanpa nyt CSS-koodia kuvien sijoittamiseen:

Img_item( sijainti: absoluuttinen; oikea: 0px; läpinäkyvyys: 0; yläosa: 0; ) .img_item2( sijainti: absoluuttinen; oikea: 0px; peittävyys: 0; ylhäällä: 150px; )

Yllä olevan koodin mukaan kaikki kunkin rivin kuvat piilotetaan ja sijoitetaan päällekkäin absoluuttista paikannusta käyttäen. Nyt voimme katsoa jQuery koodi luodaksesi kuvan animaatiolla:

$(document).ready(function())( var left = 0; $(.img_item").each(function(i,val)( $(this).animate(( vasen: vasen, peittävyys: 1 ) , 1500; left += 150; )); $(.img_item2"). += 150 ));

Meillä on siis kaksi valitsinta img_item- ja img_item2-luokkien elementtien valitsemiseksi. Käytämme sitten animointitoimintoa yksittäisiin elementteihin muuttaaksemme peittävyysominaisuuden arvoksi sujuvasti 1 ja muutetaan vasenta ominaisuutta suhteessa kuvan edellisen osan sijaintiin. Pohjimmiltaan animaatiota sovelletaan kuvan kaikkiin osiin kerralla, jolloin tuloksena on jotain tällaista:

Voimme käyttää samanlaisia ​​tehosteita liukusäätimien, näytönsäästäjien ja kuvagallerioiden sisällä. Tässä on osoitus edellisestä esimerkistä.

Nyt tiedät animaatiotoiminnon kanssa työskentelyn perusteet. Katsotaanpa tarkemmin animaationäkökohtia, erityisesti yksityiskohtaisempia asetuksia.

Tehostesekvenssin kehittäminen

Edellisessä esimerkissä animaatiota käytettiin kaikkiin elementteihin heti sivun latauksen jälkeen. Mutta joskus meidän on käytettävä tehosteita peräkkäin, jolloin kunkin elementin animaatio alkaa, kun edellisen elementin animaatio on valmis. Yritetään siis ladata sama kuva tehostesarjan avulla. Aloitetaan HTML-koodilla:

Ainoa ero aiempi versio- yhden käyttö CSS-luokka kahden luokan sijasta riveille. Tämä toteutus luo rivejä käyttämällä jQuery-koodia sen sijaan, että koodaa ne CSS-luokilla.

Tämän esimerkin toteuttamiseen käytettävä CSS-koodi on sama kuin edellinen esimerkki. Katsotaanpa nyt jQuery-koodia tehostesekvenssin luomiseksi:

$(dokumentti).ready(function())( var left = 0; var items = $(.img_item"); animateImg(kohteet,0,0,0); ));

Kun sivu on latautunut, valitsemme kaikki kuvaelementit käyttämällä img_item-luokkaa. Sitten välitämme nämä elementit animateImg-funktiolle animaation luomiseksi. Seuraava koodi esittelee animateImg-funktion toteutuksen:

var indexNum = 1; var animateImg = function(kohteet,vasen,korkeus,indeksiluku)( if(kohteet.length >= indexNum)( var item = items.get(indexNum); $(item).animate((vasen: vasen, ylhäällä: korkeus, opasiteetti: 1 ), 1500 ,function() ( vasen += 150; indeksiNum++; if(indeksiNum % 6 == 0)( vasen = 0; korkeus += 150; ) animateImg(kohteet,vasen,korkeus,indeksiNum); ) ) ) );

AnimateImg-funktiolla on neljä parametria. Ensimmäinen parametri määrittää kokoelman kuvaelementtejä. Toinen ja kolmas parametri määrittelevät vasemman ja ylemmän ominaisuuksien arvot näytölle sijoittamista varten.

Aluksi nämä kaksi arvoa asetetaan arvoon 0 kuvan sijoittamiseksi näytön vasempaan yläkulmaan. Neljäs parametri on kuvan sarjanumero niiden erottamiseksi riveiksi.

Tarkistamme ensin, olemmeko saavuttaneet elementtijoukon loppuun käyttämällä if-ehtoa. Sitten valitsemme kuvan taulukosta annetulla sarjanumerolla.

Tämän jälkeen kutsumme animaatiofunktiota, jonka kesto on 1500 millisekuntia. Lopuksi lisäämme järjestyslukua valitaksesi seuraavan elementin taulukosta.

Tässä esimerkissä meillä on kaksi 6 kuvan riviä. Joten käytämme modulo-jakoa tarkistaaksemme, olemmeko päässeet rivin loppuun. Tässä tapauksessa lisäämme seuraavan kuvan top-arvoa rivien luomiseksi dynaamisesti.

Lopuksi kutsumme rekursiivisesti animateImg-funktiota iteroimaan kaikki elementit ja luomaan koko kuvan. Seuraava kuva näyttää tehosteiden sarjan toiminnassa.

Täältä löydät esittelyn edellisestä esimerkistä.

Kuten näet, käytimme animaation suorittamiseen animaatiotoiminnon viimeistelytoimintoa seuraava elementti. Siksi jokainen animaation vaihe alkaa edellisen valmistumisen jälkeen. Voimme saavuttaa samanlaisen toiminnallisuuden käyttämällä animointifunktiojonoa.

Efektiketjut

Tähän mennessä olemme luoneet yhden tehosteen jokaiselle elementille. Monimutkaisemmissa tehtävissä meidän on yhdistettävä useita tehosteita jokaiselle ketjun elementille. Muokataan siis edellistä esimerkkiä lisäämällä tehosteketjuja.