Ja pirms daudziem gadiem pirmo reizi izmantojāt jQuery, iespējams, tā bija spēja veikt animāciju. Iespējams, ka tas bija viens no pirmajiem lielākajiem jQuery izlozēm. Šajās dienās CSS var veikt arī animāciju, izmantojot diezgan pienācīgu pārlūka atbalstu, un tā mēdz būt veiktspējīgāka, tāpēc tā nav tik aktuāla. Tomēr, ja jums ir nepieciešams ļoti dziļš pārlūka atbalsts, jQuery joprojām ir iespēja.
Mēs jau esam apskatījuši, kā mainīt CSS jQuery. Tas izskatās šādi:
$("#element").css(( "background-color": "red", "left": "20px" ));Tā vietā, lai uzreiz mainītu šo elementu uz šīm vērtībām, mēs varam tos animēt. Tas izskatās gandrīz tieši tāds pats:
$("#element").animate(( "background-color": "red", "left": "20px" ));Lūk, pildspalva, ko izgatavojām videoklipā:
Skatiet Chris Coyier (@chriscoyier) pildspalvu e111fbfa7506d19034d977b17e2160a3 vietnē CodePen
Ja mēs pārbaudīsim šo elementu pārlūkprogrammu dev rīkos, zem pārsega var redzēt, kā jQuery veic šo animāciju. Būtībā tas ātri atkārto šiem elementiem piemēroto līnijas stilu
Šajā video mēs iedziļināmies kādā jQuery kodā, ko kāds cits uzrakstīja, lai redzētu, cik labi mēs to varam sadalīt.
Skatiet pildspalvas jQuery animēto augstumu: autors: Džošs Parets (@JTParrett) vietnē CodePen
Šī brauciena laikā mēs dodamies interesantā mazā blakus ceļojumā, animējot līdz auto augstumam. Tas nav kaut kas, ko CSS vai JavaScript nevar darīt īpaši labi. Viņi dod priekšroku cietajiem skaitļiem. Animēt no 10 līdz 200 pikseļiem ir jēga. Animēt 10 pikseļus ar “neatkarīgi no tā, kāds jūs parasti būtu”, nav tik vienkārši.
Džoša kodā mēs atrodam gudru funkciju, kas būtībā iestata augstumu uz automātisko, mēra to, atjauno to, kāds tas bija, un pēc tam atdzīvina šo nesen pārbaudīto vērtību. Diezgan veikls triks! Stingrāku demonstrāciju, kas turpinās un turpinās ar neapstrādātu JavaScript, skatiet šeit.
Es to pamanīju tikai pēc videoklipa beigām, bet jQuery arī mums palīdz šajā jautājumā. Fails, kuru pamatoti izmantot jQuery # 40985. Izmantojot .slideUp/ .slideDown/ .slideToggle- tas vienkārši kaut kā darbojas, pat ja elements ir paslēpts, display: nonelai sāktu.
Skatiet Pen jQuery dzīvības augstumu: autors: Chris Coyier (@chriscoyier) vietnē CodePen
Lai pārbaudītu savu darbu vecajā IE, mēs izmantojām BrowserStack, kas ir integrēts arī CodePen.