[jQuery] Animaciones I: Opacidad y Visibilidad

Posted on


Hola, vamos a tener algunos post para algunos elementos de animaciones con jQuery los cuales espero les sean bastantes útiles.

En esta primera entrada vamos revisar algunas funciones que permiten trabajar con la opacidad y visibilidad de los elementos,  a continuación listo los efectos disponibles:

Muestra un elemento determinado. El elemento inicia oculto (100% opaco) hasta que es visible completamente.  Tiene dos firmas diferentes: fadeIn(duración, función) y fadeIn(duración, easing, función_fin).

La función_fin se ejecuta una vez se allá terminado de ejecutar el efecto.

Oculta un elemento determinado. El elemento inicia visible y se opaca hasta que se oculta.  Tiene dos firmas diferentes: fadeOut(duración, función_fin) y fadeOut(duración, easing, función_fin).

La función_fin se ejecuta una vez se allá terminado de ejecutar el efecto.

Ajusta la opacidad de un elemento.  Tiene dos firmas diferentes: fadeTo(duración, opacidad, función_fin) y fadeTo(duración, opacidad, easing, función_fin). En resumen con fadeTo lo que se hace es opacar o no un elemento esto dependiendo del valor que se le asigne al parámetro opacidad.

Opacidad puede tomar cualquier valor entre 0 y 1.

La función_fin se ejecuta una vez se allá terminado de ejecutar el efecto.

Muestra u oculta un elemento realizando una animación en su opacidad.  La sintaxis es: fadeToggle(duración, easing, función_fin).  Si el elemento esta oculto lo muestra y si esta visible lo oculta.

La función_fin se ejecuta una vez se allá terminado de ejecutar el efecto.

fadeToggle es bastante útil ya que no tenemos que determinar manualmente la visibilidad de un elemento.

Muestra un elemento.  show tiene tres firmas diferentes: show(), show(duración, función_fin) y show(duración, easing, función_fin).

La función_fin se ejecuta una vez se allá terminado de ejecutar el efecto.

Oculta un elemento.  show tiene tres firmas diferentes: hide()hide(duración, función_fin) y hide(duración, easing, función_fin).

La función_fin se ejecuta una vez se allá terminado de ejecutar el efecto.

Oculta o muestra un elemento.  Tiene tres firmas diferentes: toggle(), toggle(duración, función_fin)toggle(duración, easing,  función_fin).

La función_fin se ejecuta una vez se allá terminado de ejecutar el efecto.

Al igual que con fadeToggle(), toggle() detecta automáticamente si el elemento esta oculto o no.

Para todos los métodos anteriores, siempre easing y función_fin son opcionales.

Como se puede apreciar los efectos disponibles para trabajar con la visibilidad y opacidad de los elementos son muy similares.. así que falta de carreta y vamos a realizar un demo, la idea es tener dos opciones (datos1 y datos2), y cada vez que selecciones alguna de las opciones se ocultarán los datos de la otra opción y aparecerán los de la opción seleccionada.

Así que iniciemos:

1. Definimos dos botones que van a permitir mostrar unos u otros datos:

   1:  <input type="button" id="btnTabla1" value="Ver Tabla 1" />
   2:  <input type="button" id="btnTabla2" value="Ver Tabla 2" />

2. Creamos dos divs, donde cada uno de esos divs va a tener la información de cada opción, para este caso vamos a definir dos tablas con algunos datos ficticios, inicialmente solo el primer div lo dejamos visible (en el código del ejemplo está el contenido de cada div):

   1:   <div id="divDatos1" style="height:350px; width:550px;">
   2:      ACA EL CONTENIDO 1
   3:   <div>
   4:   <div id="divDatos2" style="height:350px; width:550px; display:none;">
   5:      ACA EL CONTENIDO 2
   6:   <div>

3. Ahora es momento de escribir el código jQuery que hará la magia:

   1:  $(function () {
   2:      $("#btnTabla1").click(function () {
   3:          $("#divDatos2").fadeOut('slow', function () {
   4:              $("#divDatos1").fadeIn('slow');
   5:          });
   6:      });
   7:      $("#btnTabla2").click(function () {
   8:          $("#divDatos1").fadeOut('slow', function () {
   9:              $("#divDatos2").fadeIn('slow');
  10:          });
  11:      })
  12:  })

Pero como funciona el código:

En la línea 1 verificamos la carga del DOM, en la línea 2 capturamos el click en el botón, luego en la línea 3 le decimos con fadeOut que oculte el segundo div de manera lenta (slow),  y cuando termine se ejecutará la función definida en el segundo parámetro, dicha función lo que hace es con el método fadeIn mostrar el primer div (lo mismo aplica para el btnTabla2). Algo bastante sencillo pero que dará como resultado un bonito efecto, no coloco imagen puesto que no se verá el efecto, así que descarguen el ejemplo y pruébenlo.

Descarga el ejemplo !

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s