Če ste se z jQuery prvič lotili pred mnogimi leti, je morda to bila zmožnost animacije. To je bil morda eden prvih velikih izžrebanj jQueryja. Dandanes lahko CSS izvaja tudi animacije s precej spodobno podporo brskalnika in je navadno bolj zmogljiv, zato je manj pomemben. Če pa potrebujete izjemno globoko podporo brskalnika, je jQuery še vedno možnost.
Kako spremeniti CSS v jQuery smo že opisali. Videti je tako:
$("#element").css(( "background-color": "red", "left": "20px" ));Namesto da bi ta element takoj preusmerili na te vrednote, jih lahko animiramo. Videti je skoraj popolnoma enako:
$("#element").animate(( "background-color": "red", "left": "20px" ));Tukaj je pisalo, ki smo ga naredili v videu:
Glejte pisalo e111fbfa7506d19034d977b17e2160a3 Chrisa Coyierja (@chriscoyier) na CodePen
Če ta element pregledamo v orodjih za razvoj brskalnikov, lahko pod pokrovom vidimo, kako jQuery izvaja to animacijo. V bistvu hitro ponovi vrstni slog, uporabljen za te elemente
V tem videu se poglobimo v neko kodo jQuery, ki jo je napisal nekdo drug, da vidimo, kako dobro jo lahko seciramo.
Oglejte si animacijsko višino Pen jQuery: samodejno Josh Parrett (@JTParrett) na CodePen
Med tem potovanjem se odpravimo na zanimivo majhno stransko potovanje z animiranjem do avto višine. To ne moreta storiti niti CSS niti JavaScript. Raje imajo trde številke. Animacija od 10 do 200 slikovnih pik je smiselna. Animirajte 10 slikovnih pik na »kakršen bi bil običajno« ni tako enostavno.
V Joshovi kodi najdemo pametno funkcijo, ki v bistvu samodejno nastavi višino, jo izmeri, vrne na tisto, kar je bila, nato pa animira na novo preizkušeno vrednost. Precej čeden trik! Za trpežnejšo predstavitev, ki gre naprej in nazaj in v surovem JavaScript, glejte tukaj.
Šele po koncu videoposnetka sem opazil, toda jQuery nam tudi pri tem dejansko pomaga. Datoteka, ki utemeljeno uporablja jQuery # 40985. Uporaba .slideUp/ .slideDown/ .slideToggle- preprosto deluje, tudi če je element display: noneza začetek skrit .
Oglejte si Pen jQuery animate height: auto Chrisa Coyierja (@chriscoyier) na CodePen
Za preizkus našega dela v stari IE smo uporabili BrowserStack, ki je prav tako integriran v CodePen.