Contenido principal
Curso: Programación de computadoras > Unidad 7
Lección 7: Animación del DOM y efectos con jQueryRevisión: animación del DOM en jQuery
jQuery provee un número de funciones para animaciones y efectos, las cuales están listadas en su documentación.
Cambiar visibilidad
Para cambios sencillos de visibilidad, puedes usar
hide() y show():$("#pic").hide();$("#pic").show();
(Ver ejemplo)También puedes usar
toggle(), que decidirá si mostrar u ocultar con base en el estado actual:
$("#pic").toggle(); (Ver ejemplo)Puedes pasarle una duración a cualquiera de esas funciones y entonces jQuery animará el cambio de la visibilidad:
$("#pic").toggle(1000);También puedes usar
slideDown(), slideUp() y slideToggle() para afectos de deslizamiento (Ver ejemplo) o fadeIn(), fadeOut() y fadeToggle() para efectos de desvanecimiento
(Ver ejemplo).Puedes pasarle una función callback como el segundo parámetro a cualquiera de esas funciones y jQuery llamará a esa función callback cuando termine la animación:
$("#pic").toggle(1000, function() {
$("body").append("It's here!");
});También puedes encadenar múltiples efectos juntos y llamar
delay() si quieres que haya un retraso entre ellos:$("#pic").slideUp(300).delay().fadeIn();Animación personalizada
Si quisieras animar propiedades específicas de CSS, puedes usar
animate(): $("#pic").animate({
width: "70%",
opacity: 0.7,
padding: 20
}, 1000);Ten en cuenta que solo puedes animar propiedades de CSS que tomen valores numéricos, así que no puedes usar esto para animar propiedades como 'color'. (Ver ejemplo)
También puedes adjuntar varias funciones callback en
animate(), si quisieras averiguar cuando la animación haya avanzado o haya terminado. Revisa la documentación para más detalles.Animar de manera adaptable
Las animaciones siempre deberían mejorar la experiencia del usuario, no empeorarla. Las animaciones deberían ayudar a los usuarios a entender algo acerca del estado de tu aplicación web o agregar un toque de diversión. No deberían hacer más lenta la experiencia de manera innecesaria y frustrar al usuario. Puedes pedirle a los usuarios retroalimentación acerca de tu uso de las animaciones o trabajar con un diseñador para decidir cómo y dónde animar.
Si sabes que tu usuario está en un dispositivo que no funciona bien con las animaciones, puedes hacer
$.fx.off igual a true.¿Quieres unirte a la conversación?
Sin publicaciones aún.