post thumbnail

jQuery desde Cero: Animaciones y Efectos

Publicado Por: Oscar González, El 24/02/2014


Detalles del Curso:

Dificultad: Aprendiz

Duración: 10 min


Más artículos en jQuery desde Cero

Este es el artículo Animaciones y Efectos de la serie jQuery desde Cero - Mostrar todos

  1. Introducción
  2. Selectores y Filtros Básicos
  3. Filtros Avanzados
  4. Recorriendo el Documento
  5. Manipulando Contenido - parte 1
  6. Manipulando Contenido - parte 2
  7. Eventos
  8. Animaciones y Efectos
  9. AJAX

En este capítulo de jQuery desde cero aprenderemos a utilizar jQuery Fx, un conjunto de funciones incluidas en la librería para aplicar animaciones y efectos en nuestras páginas y aplicaciones web.


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


¿Te ha gustado esta publicación?

Compártela:

Por Oscar González

Conoce más sobre este autor aquí


comments powered by Disqus