Jei prieš daugelį metų pirmą kartą apsipratote su „jQuery“, tai galėjo būti jo gebėjimas kurti animaciją. Tai buvo galbūt vienas pirmųjų „jQuery“ burtų traukimo taškų. Šiais laikais CSS taip pat gali atlikti animaciją naudodamas gana padorų naršyklės palaikymą, ir jis yra labiau našus, todėl jis yra mažiau aktualus. Tačiau, jei jums reikia itin gilios naršyklės palaikymo, „jQuery“ vis dar yra galimybė.
Mes jau aptarėme, kaip pakeisti CSS „jQuery“. Tai atrodo taip:
$("#element").css(( "background-color": "red", "left": "20px" ));Užuot akimirksniu nukreipę tą elementą į tas vertybes, galime juos animuoti. Tai atrodo beveik lygiai taip pat:
$("#element").animate(( "background-color": "red", "left": "20px" ));Štai rašiklis, kurį padarėme vaizdo įraše:
„CodePen“ ieškokite Chriso Coyierio (@chriscoyier) rašiklio rašiklio e111fbfa7506d19034d977b17e2160a3
Jei apžiūrėsime šį elementą naršyklių kūrimo įrankiuose, po gaubtu galime pamatyti, kaip „jQuery“ daro tą animaciją. Iš esmės jis greitai pakartoja tiems elementams pritaikytą stilių
Šiame vaizdo įraše mes įsigiliname į kažkokį „jQuery“ kodą, kurį parašė kažkas, kad pamatytume, kaip gerai mes galime jį išskaidyti.
Žiūrėkite „Pen jQuery“ animuotą aukštį: „JosP Parrett“ (@JTParrett) auto „CodePen“
Per tą kelionę einame į įdomią mažą šalutinę kelionę animuodami iki auto aukščio. Tai nėra kažkas, ko nei CSS, nei „JavaScript“ negali padaryti ypač gerai. Jiems labiau patinka sunkūs skaičiai. Animuoti nuo 10 iki 200 taškų yra prasminga. Animuoti 10 taškų į „kokia būtumėte įprasta“ nėra taip paprasta.
Josho kode randame sumanią funkciją, kuri iš esmės nustato aukštį į automatinį, išmatuoja jį, nustato jį atgal į tai, kas buvo, tada animuoja tą naujai patikrintą vertę. Gana tvarkingas triukas! Patikimesnę demonstracinę versiją, kuri eina pirmyn ir atgal, bei neapdorotą „JavaScript“, žiūrėkite čia.
Aš nepastebėjau tik pasibaigus vaizdo įrašui, tačiau „jQuery“ iš tikrųjų taip pat padeda mums tai padaryti. Failas, kurį pagrįstai reikia naudoti „jQuery“ # 40985. Naudojant .slideUp/ .slideDown/ .slideToggle- tai tiesiog kažkaip veikia, net jei elementas yra paslėptas display: nonenorint pradėti.
Žiūrėkite „Pen jQuery“ animuotą aukštį: Chriso Coyierio (@chriscoyier) automobilis „CodePen“
Norėdami išbandyti savo darbą senoje IE, naudojome „BrowserStack“, kuri taip pat integruota į „CodePen“.