jQuery desde Cero: Animaciones y Efectos

Mostrar y ocultar elementos

Para mostrar y ocultar elementos del DOM, contamos con las funciones show y hide respectivamente.

• show(): sirve para mostrar los elementos seleccionados si se encuentran ocultos.
• hide(): sirve para ocultar los elementos seleccionados si son visibles.

Estas dos funciones pueden tomar dos parámetros opcionales, “speed” y “callback”, uno para especificar el tiempo que debe durar la animación, y el otro una función que se llama cuando termina dicha animación.

• show(speed, callback)
• hide(speed, callback)

Usando la función toggle podemos mostrar u ocultar un elementos dependiendo de su estado.

• toggle(): Si esta oculto se muestra y si es visible se oculta
• toggle(switch): Si switch es true entonces muetra todos los elementos seleccionados, si es falso los oculta, esto facilita colocar varios elementos en el mismo estado de visibilidad en caso de seleccionar varios en distintos estados.
• toggle(speed, callback): muestra u oculta con velocidad y/o llamada de operación completada.

jQuery desde Cero

---

Desvanecer y aparecer gradualmente elementos

La función fade() es aquella destinada a desvanecer y aparecer objetos, por completo o hasta un punto de opacidad especifico.

• fadeIn(speed, callback): aparece gradualmente elementos con un tiempo de duración y una llamada de vuelta.
• fadeOut(speed, callback): desaparece gradualmente elementos con un tiempo de duración y una llamada de vuelta.
• fadeTo(speed, opacity, callback): aparece o desaparece gradualmente elementos con un tiempo de duración, opacidad (valor de 0 a 1.0) y una llamada de vuelta.

jQuery desde Cero

---

Deslizando elementos

Deslizar es otra manera de aparecer y desaparecer elementos del DOM, solo que esta vez con un efecto de deslizamiento.

• slideDown(speed, callback): revela elementos con un tiempo de duración y una llamada de vuelta.
• slideUp(speed, callback): oculta elementos con un tiempo de duración y una llamada de vuelta.
• slideToggle(speed, callback): revela u oculta elementos con un tiempo de duración y una llamada de vuelta.

jQuery desde Cero

---

Animaciones personalizadas

Si ninguna de las animaciones anteriores se ajusta a tus necesidades, puedes crear tus propias animaciones. Tu imaginación es el límite, literalmente.

• animate(parámetros, duración, easing, callback): realiza una animación de los parámetros especificados.
  • Parametros: propiedades de los elementos a animar (“with”, “height”, “padding”, etc).
  • Duración: tiempo en mili-segundos que debe extenderse la animación
  • easing: tipo de función de easing (linear o swing).
  • callback: función a llamar cuando la animación termina.
• animate(parámetros, opciones): Crea una animación personalizada con las propiedades a animar y las opciones que es un objeto con algunas de las opciones de la función anterior como propiedades.
• stop(): detiene todas las animaciones que estén corriendo en los elementos especificados.

jQuery desde Cero