Efectos y animaciones en jQuery: show, hide, fade y slide

jQuery incluye efectos visuales simples que permiten mostrar, ocultar o animar elementos sin escribir manualmente toda la lógica CSS.

show() y hide()

show() muestra un elemento oculto y hide() lo oculta.

$("#panel").hide();
$("#panel").show();

toggle()

toggle() alterna entre visible y oculto.

$("#boton").on("click", function () {
    $("#panel").toggle();
});

fadeIn() y fadeOut()

Realizan una transición modificando gradualmente la opacidad.

$("#mensaje").fadeIn();
$("#mensaje").fadeOut();

fadeToggle()

$("#mensaje").fadeToggle();

Alterna automáticamente entre aparecer y desaparecer.

slideUp() y slideDown()

Ocultan o muestran un elemento mediante un movimiento vertical.

$("#detalle").slideUp();
$("#detalle").slideDown();

slideToggle()

$("#titulo").on("click", function () {
    $("#contenido").slideToggle();
});

Este patrón fue muy utilizado para acordeones y paneles desplegables.

Duración

Podemos indicar la duración en milisegundos.

$("#panel").fadeOut(500);

Callback al finalizar

Muchos efectos permiten ejecutar una función cuando terminan.

$("#panel").fadeOut(400, function () {
    console.log("Animación terminada");
});

animate()

animate() permite interpolar algunas propiedades CSS numéricas.

$("#caja").animate({
    width: "300px",
    opacity: 0.5
}, 600);

¿Conviene usar estos efectos hoy?

Son útiles en proyectos jQuery existentes y para interacciones simples. En proyectos modernos muchas animaciones se resuelven mejor con CSS mediante transition y animation.

Ejercicio

Creá una sección de preguntas frecuentes donde cada respuesta aparezca y desaparezca usando slideToggle().

Errores comunes

• abusar de animaciones;
• encadenar efectos demasiado largos;
• animar propiedades que CSS resuelve mejor;
• no considerar accesibilidad y usuarios sensibles al movimiento.

---

¿Te sirvió esta guía? ☕

Si este contenido te ayudó a aprender jQuery, podés apoyar a Club Programador. Cada aporte ayuda a mantener el sitio online y a seguir publicando material gratuito.

🇦🇷 Apoyar desde Argentina

☕ Invitame un café con Mercado Pago

🌎 Apoyar desde otro país

☕ Apoyar con PayPal

Seguí aprendiendo jQuery

← Eventos en jQuery: click, change, submit, keyup y on()

Recorrer elementos con jQuery: each(), index() y trabajo con colecciones →