Als je jaren geleden voor het eerst met jQuery hebt gewerkt, was het misschien de mogelijkheid om animatie te maken. Dat was misschien wel een van de eerste grote trekkingen van jQuery. Tegenwoordig kan CSS ook animaties maken met redelijk goede browserondersteuning en het heeft de neiging om beter te presteren, dus het is minder relevant. Als je echter super diepe browserondersteuning nodig hebt, is jQuery absoluut nog steeds een optie.
We hebben al besproken hoe u CSS in jQuery kunt wijzigen. Het ziet er zo uit:
$("#element").css(( "background-color": "red", "left": "20px" ));In plaats van dat element onmiddellijk naar die waarden te verschuiven, kunnen we ze animeren. Het ziet er bijna precies hetzelfde uit:
$("#element").animate(( "background-color": "red", "left": "20px" ));Dit is de pen die we in de video hebben gemaakt:
Zie de Pen e111fbfa7506d19034d977b17e2160a3 door Chris Coyier (@chriscoyier) op CodePen
Als we dat element in de dev-tools van de browser inspecteren, kunnen we onder de motorkap zien hoe jQuery die animatie doet. In wezen herhaalt het snel de inline styling die op die elementen wordt toegepast
In deze video gaan we in op een jQuery-code die iemand anders heeft geschreven om te zien hoe goed we die kunnen ontleden.
Zie de Pen jQuery animeren hoogte: auto door Josh Parrett (@JTParrett) op CodePen
Tijdens die reis gaan we op een interessante kleine zijreis over het animeren tot autohoogtes. Dit is iets dat noch CSS noch JavaScript bijzonder goed kunnen doen. Ze geven de voorkeur aan harde cijfers. Animeren van 10px tot 200px is logisch. 10px animeren naar "wat je normaal gesproken ook zou zijn" is niet zo eenvoudig.
In de code van Josh vinden we een slimme functie die in wezen de hoogte op auto zet, meet, terugzet naar wat het was en vervolgens animeert naar die nieuw geteste waarde. Best leuke truc! Voor een robuustere demo die heen en weer gaat en in onbewerkte JavaScript, kijk hier.
Ik merkte het pas nadat de video was afgelopen, maar jQuery helpt ons hier ook echt mee. Bestand dat onder reden om jQuery # 40985 te gebruiken. Het gebruik van .slideUp/ .slideDown/ .slideToggle- het werkt gewoon op de een of andere manier, zelfs als het element is verborgen display: noneom te beginnen.
Zie de Pen jQuery animeren hoogte: auto door Chris Coyier (@chriscoyier) op CodePen
Om ons werk in het oude IE te testen, hebben we BrowserStack gebruikt, dat ook in CodePen is geïntegreerd.