Ako ste se prvi put okupili s jQueryjem prije mnogo godina, možda je to bila sposobnost izrade animacije. To je bio možda jedan od prvih velikih izvlačenja jQueryja. Ovih dana CSS može raditi i animaciju s prilično pristojnom podrškom preglednika i obično je učinkovitiji, pa je manje relevantan. Međutim, ako vam treba super duboka podrška za preglednik, jQuery je apsolutno još uvijek opcija.
Već smo opisali kako promijeniti CSS u jQueryju. Izgleda ovako:
$("#element").css(( "background-color": "red", "left": "20px" ));Umjesto da taj element trenutno prebacimo na te vrijednosti, možemo ih animirati. Izgleda gotovo potpuno isto:
$("#element").animate(( "background-color": "red", "left": "20px" ));Evo olovke koju smo napravili u videu:
Pogledajte olovku e111fbfa7506d19034d977b17e2160a3 Chrisa Coyiera (@chriscoyier) na CodePen
Ako pregledamo taj element u alatima za razvoj preglednika, ispod haube možemo vidjeti kako jQuery radi tu animaciju. U osnovi, brzo ponavlja iteljni stil primijenjen na te elemente
U ovom videu istražujemo neki jQuery kôd koji je netko drugi napisao kako bismo vidjeli koliko ga dobro možemo secirati.
Pogledajte animiranu visinu olovke jQuery: auto Josh Parrett (@JTParrett) na CodePen
Tijekom tog putovanja idemo na zanimljivo malo sporedno putovanje animiranjem do auto visina. To je nešto što ni CSS ni JavaScript ne mogu učiniti posebno dobro. Više vole tvrde brojeve. Animacija od 10 do 200 piksela ima smisla. Animirajte 10 piksela na "ono što biste inače bili" nije tako lako.
U Joshovom kodu pronalazimo pametnu funkciju koja u biti postavlja visinu na automatski, mjeri je, vraća natrag na ono što je bila, a zatim animira na tu novoispitanu vrijednost. Prilično uredan trik! Za robusniji prikaz koji ide naprijed-natrag i u sirovom JavaScript-u, pogledajte ovdje.
Primijetio sam tek nakon što je video završio, ali jQuery nam zapravo pomaže i u tome. Datoteka koja pod razlogom koristi jQuery # 40985. Korištenje .slideUp/ .slideDown/ .slideToggle- to jednostavno nekako funkcionira, čak i ako je element skriven display: noneza početak.
Pogledajte Pen jQuery animate height: auto, Chris Coyier (@chriscoyier) na CodePen
Da bismo testirali svoj rad u starom IE-u, koristili smo BrowserStack, koji je također integriran u CodePen.