| # | Método | Descripción Técnica | Código jQuery | Resultado Visual / Acción |
|---|---|---|---|---|
| 1 | hide() | Oculta elementos instantáneamente. | $("#caja1").hide(); |
Caja 1
|
| 2 | show() | Muestra un elemento con velocidad de 1s. | $("#caja2").show(1000); |
|
| 3 | toggle() | Alterna visibilidad de forma inteligente. | $("#caja3").toggle("slow"); |
Caja 3
|
| 4 | fadeOut() | Desvanece la opacidad hasta ocultar. | $("#caja4").fadeOut("slow"); |
Caja 4
|
| 5 | fadeIn() | Aparece incrementando opacidad rápido. | $("#caja5").fadeIn("fast"); |
|
| 6 | fadeToggle() | Alterna el desvanecimiento (800ms). | $("#caja6").fadeToggle(800); |
Caja 6
|
| 7 | fadeTo() | Modifica la opacidad al 40% progresivo. | $("#caja7").fadeTo("slow", 0.4); |
Caja 7
|
| 8 | slideDown() | Desliza el elemento hacia abajo. | $("#caja8").slideDown("slow"); |
|
| 9 | slideUp() | Desliza y oculta hacia arriba (600ms). | $("#caja9").slideUp(600); |
Caja 9
|
| 10 | slideToggle() | Alterna el despliegue vertical de la caja. | $("#caja10").slideToggle(); |
Caja 10
|
| 11 | stop() | Detiene inmediatamente animaciones en curso. | $("#caja11").stop(); |
Caja 11
|
| 12 | Callback | Ejecuta código tras finalizar la acción. | $("#caja12").hide("slow", fn); |
Caja 12
|
| 13 | fadeTo(0) | Opacidad 0 manteniendo el espacio web. | $("#caja13").fadeTo(1000, 0); |
Caja 13
|
| 14 | Reset Total | Reinicia de golpe el estado de todas las cajas. | $(".caja-diseno").show(); |
|
| 15 | Chaining | Encadena múltiples efectos continuos. | $("#caja15").slideUp().slideDown(); |
Caja 15
|
Efectos y Animaciones jQuery
Listado interactivo de 15 ejemplos controlados únicamente por selectores de ID.