Om du först dabblade med jQuery för många år sedan, kan det ha varit att det var förmågan att göra animering. Det var kanske en av jQuerys första stora dragningar. Dessa dagar kan CSS också göra animering med ganska anständigt webbläsarstöd och det tenderar att vara mer performant, så det är mindre relevant. Men om du behöver super djupt webbläsarsupport är jQuery absolut fortfarande ett alternativ.
Vi har redan beskrivit hur man ändrar CSS i jQuery. Det ser ut så här:
$("#element").css(( "background-color": "red", "left": "20px" ));Istället för att omedelbart flytta det elementet till dessa värden kan vi animera dem. Det ser nästan exakt ut:
$("#element").animate(( "background-color": "red", "left": "20px" ));Här är pennan som vi gjorde i videon:
Se pennan e111fbfa7506d19034d977b17e2160a3 av Chris Coyier (@chriscoyier) på CodePen
Om vi inspekterar det elementet i webbläsarens utvecklingsverktyg kan vi se under huven om hur jQuery gör den animeringen. I huvudsak upprepar det snabbt den inbyggda stylingen som tillämpas på dessa element
I den här videon gräver vi in lite jQuery-kod som någon annan skrev för att se hur bra vi kan dissekera den.
Se Pen jQuery animera höjd: auto av Josh Parrett (@JTParrett) på CodePen
Under den resan går vi på en intressant liten sidoresa för att animera till autohöjder. Detta är något som varken CSS eller JavaScript kan göra särskilt bra. De föredrar hårda siffror. Animera 10px till 200px är vettigt. Animera 10px till "vad du normalt skulle vara" är inte lika lätt.
I Joshs kod hittar vi en smart funktion som i huvudsak ställer in höjden till auto, mäter den, sätter tillbaka den till vad den var och sedan animerar till det nyligen testade värdet. Ganska snyggt trick! För en mer robust demo som går fram och tillbaka och i rå JavaScript, se här.
Jag märkte inte förrän efter det att videon slutade, men jQuery hjälper oss faktiskt också med det här. Arkivera det med anledning att använda jQuery # 40985. Att använda .slideUp/ .slideDown/ .slideToggle- det fungerar bara på något sätt, även om elementet är dolt för display: noneatt starta.
Se Pen jQuery animera höjd: auto av Chris Coyier (@chriscoyier) på CodePen
För att testa vårt arbete i gamla IE använde vi BrowserStack, som också är integrerat i CodePen.