Jos olet ensin tutkinut jQueryä monta vuotta sitten, se on voinut olla sen kyky tehdä animaatiota. Se oli ehkä yksi jQueryn ensimmäisistä suurista arvonnoista. Nykyään CSS voi tehdä animaatiota myös melko kunnollisella selaintukella, ja se on yleensä suorituskykyisempi, joten se on vähemmän merkityksellistä. Jos tarvitset kuitenkin erittäin syvää selaintukea, jQuery on ehdottomasti edelleen vaihtoehto.
Olemme jo käsitelleet CSS: n muuttamista jQueryssä. Se näyttää tältä:
$("#element").css(( "background-color": "red", "left": "20px" ));Sen sijaan, että siirrämme kyseisen elementin välittömästi noihin arvoihin, voimme animoida ne. Se näyttää melkein samalta:
$("#element").animate(( "background-color": "red", "left": "20px" ));Tässä on kynä, jonka teimme videosta:
Katso Chris Coyierin (@chriscoyier) kynä e111fbfa7506d19034d977b17e2160a3 CodePenistä
Jos tarkastamme kyseisen elementin selainten kehitystyökaluissa, voimme nähdä konepellin alla, kuinka jQuery tekee animaation. Pohjimmiltaan se toistaa nopeasti kyseisiin elementteihin sovelletun linjaisen tyylin
Tässä videossa kaivetaan jQuery-koodiin, jonka joku muu kirjoitti nähdäkseen kuinka hyvin voimme leikata sitä.
Katso kynän jQuery-animointikorkeus: auto, kirjoittanut Josh Parrett (@JTParrett) CodePenillä
Tuon matkan aikana käymme mielenkiintoisella pienellä sivumatkalla animaatiolla auton korkeuksiin. Tätä ei CSS tai JavaScript voi tehdä erityisen hyvin. He mieluummin kovat numerot. Animoi 10–200 kuvapistettä on järkevää. Animoi 10 kuvapistettä "mitä ikinä olisit normaalisti" ei ole niin helppoa.
Joshin koodista löytyy älykäs toiminto, joka asettaa olennaisesti korkeuden automaattiseksi, mittaa sen, asettaa sen takaisin siihen, mikä se oli, ja animoi sitten vasta testatun arvon. Melko siisti temppu! Vankempi esittely, joka menee edestakaisin ja raakana JavaScript-muodossa, on täällä.
Huomasin vasta videon päättymisen jälkeen, mutta jQuery todella auttaa meitä myös tässä. Tiedosto, joka on syytä käyttää jQuery # 40985. Käyttämällä .slideUp/ .slideDown/ .slideToggle- se toimii vain jotenkin, vaikka elementti olisi piilotettu display: nonealoitettavaksi.
Katso kynän jQuery-animaatiokorkeus: auto kirjoittanut Chris Coyier (@chriscoyier) CodePeniltä
Testataksemme työtämme vanhassa IE: ssä käytimme BrowserStackia, joka on myös integroitu CodePeniin.