Hvis du først dablet med jQuery for mange år siden, kan det ha vært evnen til å gjøre animasjon. Det var kanskje en av de første store trekkene til jQuery. I disse dager kan CSS også gjøre animasjon med ganske anstendig nettleserstøtte, og det har en tendens til å være mer performant, så det er mindre relevant. Men hvis du trenger super dyp nettleserstøtte, er jQuery absolutt et alternativ.
Vi har allerede dekket hvordan du endrer CSS i jQuery. Det ser slik ut:
$("#element").css(( "background-color": "red", "left": "20px" ));I stedet for å umiddelbart flytte elementet til disse verdiene, kan vi animere dem. Det ser nesten helt likt ut:
$("#element").animate(( "background-color": "red", "left": "20px" ));Her er pennen vi laget i videoen:
Se pennen e111fbfa7506d19034d977b17e2160a3 av Chris Coyier (@chriscoyier) på CodePen
Hvis vi inspiserer dette elementet i nettleserens utviklingsverktøy, kan vi se under panseret på hvordan jQuery gjør den animasjonen. I hovedsak gjentas det raskt den innebygde stylingen som brukes på elementene
I denne videoen graver vi i noen jQuery-koder som noen andre skrev for å se hvor godt vi kan dissekere den.
Se Pen jQuery animere høyde: auto av Josh Parrett (@JTParrett) på CodePen
I løpet av den reisen går vi på en interessant liten sidereise med animasjon til autohøyder. Dette er noe som verken CSS eller JavaScript kan gjøre spesielt bra. De foretrekker harde tall. Animer 10px til 200px er fornuftig. Animer 10px til "hva du normalt vil være" er ikke like enkelt.
I Joshs kode finner vi en smart funksjon som i hovedsak setter høyden til auto, måler den, setter den tilbake til hva den var, og deretter animerer til den nylig testede verdien. Ganske pent triks! For en mer robust demo som går frem og tilbake og i rå JavaScript, se her.
Jeg la ikke merke til det etter at videoen ble avsluttet, men jQuery hjelper oss faktisk også med dette. Fil det som grunn til å bruke jQuery # 40985. Ved å bruke .slideUp/ .slideDown/ .slideToggle- fungerer det bare på en eller annen måte, selv om elementet er skjult for display: noneå starte.
Se Pen jQuery animere høyde: auto av Chris Coyier (@chriscoyier) på CodePen
For å teste arbeidet vårt i gamle IE, brukte vi BrowserStack, som også er integrert i CodePen.