Si primero incursionó en jQuery hace muchos años, podría haber sido su capacidad para hacer animación. Ese fue quizás uno de los primeros grandes atractivos de jQuery. En estos días, CSS también puede hacer animación con un soporte de navegador bastante decente y tiende a ser más eficaz, por lo que es menos relevante. Sin embargo, si necesita un soporte de navegador súper profundo, jQuery sigue siendo una opción.
Ya hemos cubierto cómo cambiar CSS en jQuery. Se parece a esto:
$("#element").css(( "background-color": "red", "left": "20px" ));En lugar de cambiar instantáneamente ese elemento a esos valores, podemos animarlos. Se ve casi exactamente igual:
$("#element").animate(( "background-color": "red", "left": "20px" ));Aquí está la pluma que hicimos en el video:
Vea el lápiz e111fbfa7506d19034d977b17e2160a3 de Chris Coyier (@chriscoyier) en CodePen
Si inspeccionamos ese elemento en las herramientas de desarrollo de los navegadores, podemos ver bajo el capó cómo jQuery está haciendo esa animación. Esencialmente, itera rápidamente el estilo en línea aplicado a esos elementos
En este video, profundizamos en un código jQuery que alguien más escribió para ver qué tan bien podemos diseccionarlo.
Vea la altura animada de Pen jQuery: auto de Josh Parrett (@JTParrett) en CodePen
Durante ese viaje, emprendemos un pequeño viaje lateral interesante sobre la animación a alturas automáticas. Esto es algo que ni CSS ni JavaScript pueden hacer particularmente bien. Prefieren números duros. Animar de 10px a 200px tiene sentido. Animar 10px a "lo que sea normalmente" no es tan fácil.
En el código de Josh, encontramos una función inteligente que esencialmente establece la altura en automático, la mide, la restablece a lo que era y luego anima a ese valor recién probado. ¡Un truco bastante bueno! Para obtener una demostración más sólida que va y viene y en JavaScript sin formato, consulte aquí.
No me di cuenta hasta después de que terminó el video, pero jQuery también nos ayuda con esto. Archívelo bajo la razón para usar jQuery # 40985. Usando .slideUp/ .slideDown/ .slideToggle- simplemente funciona de alguna manera, incluso si el elemento está oculto con display: nonepara comenzar.
Vea la altura animada de Pen jQuery: auto de Chris Coyier (@chriscoyier) en CodePen
Para probar nuestro trabajo en el antiguo IE, usamos BrowserStack, que también está integrado en CodePen.