[jQuery] Animaciones III: Administrando las animaciones

Posted on


Hola, este es es segundo post sobre las animaciones en jQuery y vamos a revisar algunas funciones bastante útiles.

Cuando implementamos efectos como el siguiente:

   1:  $("selector").fadeIn().fadeOut().fadeIn().fadeOut();

En el caso anterior los efectos son colocados en una cola, y los efectos son ejecutados uno tras otro.

Para administrar las colas de las animaciones jQuery ofrece algunas funciones como:

  • clearQueue(): Elimina los efectos que no han sido ejecutados.
  • delay(): Retrasa cierto tiempo la ejecución del siguiente efecto.
  • dequeue(): Ejecuta el siguiente efecto
  • queue(): Permite añadir una función al finalizar la ejecución de todos los efectos en la cola.
  • stop(): Detiene una cola de animación.

Bueno ahora vamos a realizar un ejemplo.

1. Crear las diferentes opciones que se van a tener:

   1:  <div id="divOpciones">
   2:      <label id="lblIniciar" class="opciones">Iniciar animaciones</label>
   3:      |
   4:      <Label ID="lblDetener" class="opciones">Detener animaciones</Label>
   5:      |
   6:      <label id="lblLimpiar" class="opciones">Limpiar cola</label>
   7:      |
   8:      <label id="lblDelay" class="opciones">Demorar efectos</label>
   9:      |
  10:      <label id="lblQueue" class="opciones">Queue</label>
  11:  </div>

2. Crear un div que será el que se animará:

   1:  <div id="divAnimar"></div>

3. Finalmente crear el código jQuery para cada una de las opciones:

   1:  $(function () {
   2:      $("#lblIniciar").click(function () {
   3:          $("#divAnimar").fadeOut('slow').fadeIn('slow').fadeOut('slow').fadeIn('slow').fadeOut('slow').fadeIn('slow').fadeOut('slow').fadeIn('slow').fadeOut('slow').fadeIn('slow');
   4:      });
   5:      $("#lblDetener").click(function () {
   6:          $("#divAnimar").stop(true);
   7:      });
   8:      $("#lblLimpiar").click(function () {
   9:          $("#divAnimar").clearQueue();
  10:      });
  11:      $("#lblDelay").click(function () {
  12:          $("#divAnimar").fadeOut('slow').delay(1000).fadeIn('slow').delay(1000).fadeOut('slow').delay(1000).fadeIn('slow').delay(1000).fadeOut('slow').delay(1000).fadeIn('slow');
  13:      });
  14:      $("#lblQueue").click(function () {
  15:          $("#divAnimar").fadeOut('slow', function () {
  16:              $(this).queue(function () {
  17:                  $(this).css({
  18:                     "width": "150px",
  19:                     "height": "150px",
  20:                     "background-color": "#819FF7"
  21:                  });
  22:             });
  23:          }).fadeIn('slow').fadeOut('slow').fadeIn('slow').fadeOut('slow').fadeIn('slow');
  24:      });
  25:  })

Como se puede observar es realmente sencillo, la única función que cambiar un poco es la asociada al label lblQueue, en dicho caso una vez se termine de ejecutar la cola de animaciones se realizará los especificado entre las líneas 16 – 22, lo cuál no hará más que modificar el estilo del div.

La función asociada al label lblDelay lo que hace es que después de ejecutar el efecto espera 1 segundo para ejecutar el siguiente efecto.

Espero les sea de utilidad.

Descarga del 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