Dacă v-ați interesat pentru prima dată de jQuery acum mulți ani, s-ar putea să fi fost abilitatea de a face animație. Acesta a fost probabil unul dintre primele extrageri mari ale jQuery. În zilele noastre, CSS poate face animație și cu un suport de browser destul de decent și tinde să fie mai performant, deci este mai puțin relevant. Cu toate acestea, dacă aveți nevoie de suport pentru browser super profund, jQuery este încă o opțiune.
Am prezentat deja cum să schimbăm CSS în jQuery. Arată așa:
$("#element").css(( "background-color": "red", "left": "20px" ));În loc să mutăm instant elementul respectiv pe acele valori, le putem anima. Arată aproape exact la fel:
$("#element").animate(( "background-color": "red", "left": "20px" ));Iată stiloul pe care l-am făcut în videoclip:
Vedeți Penul e111fbfa7506d19034d977b17e2160a3 de Chris Coyier (@chriscoyier) pe CodePen
Dacă inspectăm acel element în instrumentele de dezvoltare a browserelor, putem vedea sub capotă modul în care jQuery face acea animație. În esență, iterează rapid stilul în linie aplicat acelor elemente
În acest videoclip, săpăm un cod jQuery pe care altcineva l-a scris pentru a vedea cât de bine îl putem diseca.
Vedeți înălțimea animată Pen jQuery: auto de Josh Parrett (@JTParrett) pe CodePen
În timpul acelei călătorii, mergem într-o mică călătorie laterală interesantă pe animarea la înălțimi automate. Acesta este un lucru pe care nici CSS sau JavaScript nu îl pot face deosebit de bine. Ei preferă numerele grele. Animați între 10 și 200 px are sens. Animează 10 px la „orice ai fi în mod normal” nu este la fel de ușor.
În codul lui Josh, găsim o funcție inteligentă care setează în esență înălțimea la auto, o măsoară, o setează înapoi la ceea ce a fost, apoi se animă la acea valoare recent testată. Truc destul de îngrijit! Pentru o demonstrație mai robustă care merge înainte și înapoi și în JavaScript brut, consultați aici.
Nu am observat decât după terminarea videoclipului, dar jQuery ne ajută și cu asta. Înregistrați acest motiv, pentru a utiliza jQuery # 40985. Folosind .slideUp/ .slideDown/ .slideToggle- funcționează cumva, chiar dacă elementul este ascuns display: nonepentru a începe.
Vedeți înălțimea animată Pen jQuery: auto de Chris Coyier (@chriscoyier) pe CodePen
Pentru a ne testa activitatea în vechiul IE, am folosit BrowserStack, care este, de asemenea, integrat în CodePen.