Kui te esimest korda jQueryga möllasite aastaid tagasi, siis võis see olla võime animatsiooni teha. See oli võib-olla üks jQuery esimesi suuri loosimisi. Tänapäeval saab CSS teha ka animatsiooni üsna korraliku brauseritoega ja see kipub olema toimivam, seega vähem asjakohane. Kui vajate aga ülisügavat brauserituge, on jQuery absoluutselt endiselt võimalus.
Oleme juba käsitlenud, kuidas CSS-i jQuery's muuta. See näeb välja selline:
$("#element").css(( "background-color": "red", "left": "20px" ));Selle asemel, et see element koheselt nendele väärtustele nihutada, saame neid animeerida. See näeb välja peaaegu täpselt sama:
$("#element").animate(( "background-color": "red", "left": "20px" ));Siin on videost valmistatud pliiats:
Vaadake CodePenilt Chris Coyieri (@chriscoyier) pliiatsi e111fbfa7506d19034d977b17e2160a3
Kui kontrollime seda elementi brauserite arendustööriistades, näeme kapoti all, kuidas jQuery seda animatsiooni teeb. Põhimõtteliselt kordab see kiiresti nendele elementidele rakendatavat sisemist stiili
Selles videos uurime mõnda jQuery koodi, mille keegi teine kirjutas, et näha, kui hästi me seda lahata saame.
Vaadake pliiatsi jQuery animeeritavat kõrgust: autor Josh Parrett (@JTParrett) CodePenis
Selle teekonna jooksul läheme huvipakkuvale väikesele teekonnale animeerimisega autokõrguseni. Seda ei saa CSS ega JavaScript eriti hästi teha. Nad eelistavad raskeid numbreid. Animeerida 10–200 pikslit on mõistlik. Animeerige 10 pikslit väärtusele „mis iganes te tavaliselt oleksite” pole nii lihtne.
Joshi koodist leiame nutika funktsiooni, mis seab sisuliselt kõrguse automaatseks, mõõdab selle, seab selle tagasi selliseks, nagu see oli, ja animeerib selle äsja testitud väärtuse. Päris korralik trikk! Tugevama demo kohta, mis läheb edasi-tagasi ja toores JavaScripti abil, vaadake siin.
Ma märkasin seda alles pärast video lõppu, kuid jQuery aitab meid tegelikult ka selles osas. Fail, mis on mõistlik kasutada jQuery # 40985. Kasutades .slideUp/ .slideDown/ .slideToggle- see lihtsalt töötab kuidagi, isegi kui element on display: nonealustamiseks peidetud .
Vaadake pliiatsi jQuery animeeritud kõrgust: auto autor Chris Coyier (@chriscoyier) CodePenis
Oma töö testimiseks vanas IE-s kasutasime BrowserStacki, mis on integreeritud ka CodePeni.