Hvis du først dabblede med jQuery for mange år siden, kunne det have været, at det var evnen til at lave animation. Det var måske en af jQuerys første store træk. I disse dage kan CSS også lave animation med temmelig anstændig browsersupport, og det har tendens til at være mere performant, så det er mindre relevant. Hvis du har brug for super dyb browsersupport, er jQuery dog stadig en mulighed.
Vi har allerede dækket, hvordan du ændrer CSS i jQuery. Det ser sådan ud:
$("#element").css(( "background-color": "red", "left": "20px" ));I stedet for straks at flytte elementet til disse værdier, kan vi animere dem. Det ser næsten nøjagtigt det samme ud:
$("#element").animate(( "background-color": "red", "left": "20px" ));Her er den pen, vi lavede i videoen:
Se pennen e111fbfa7506d19034d977b17e2160a3 af Chris Coyier (@chriscoyier) på CodePen
Hvis vi inspicerer dette element i browserværktøjsværktøjerne, kan vi se under hætten om, hvordan jQuery gør den animation. I det væsentlige gentager det hurtigt den integrerede styling, der anvendes på disse elementer
I denne video graver vi ind i en jQuery-kode, som en anden skrev for at se, hvor godt vi kan dissekere den.
Se Pen jQuery animere højde: auto af Josh Parrett (@JTParrett) på CodePen
I løbet af denne rejse går vi på en interessant lille siderejse med animation til autohøjder. Dette er noget, som hverken CSS eller JavaScript kan klare sig særligt godt. De foretrækker hårde tal. Animer 10px til 200px giver mening. Animer 10 px til "hvad du normalt ville være" er ikke så let.
I Josh's kode finder vi en smart funktion, der i det væsentlige indstiller højden til auto, måler den, sætter den tilbage til, hvad den var, og derefter animerer til den nyligt testede værdi. Temmelig pænt trick! For en mere robust demo, der går frem og tilbage og i rå JavaScript, se her.
Jeg lagde ikke mærke til det, efter at videoen sluttede, men jQuery hjælper os faktisk også med dette. Fil, der under grund til at bruge jQuery # 40985. Brug af .slideUp/ .slideDown/ .slideToggle- det virker bare på en eller anden måde, selvom elementet er skjult med for display: noneat starte.
Se Pen jQuery animere højde: auto af Chris Coyier (@chriscoyier) på CodePen
For at teste vores arbejde i gammel IE brugte vi BrowserStack, som også er integreret i CodePen.