6.2. Efectos incorporados en la biblioteca

Los efectos más utilizado ya vienen incorporados dentro de la biblioteca en forma de métodos:

• $.fn.show Muestra el elemento seleccionado.
• $.fn.hide Oculta el elemento seleccionado.
• $.fn.fadeIn De forma animada, cambia la opacidad del elemento seleccionado al 100 %.
• $.fn.fadeOut De forma animada, cambia la opacidad del elemento seleccionado al 0
• $.fn.slideDown Muestra el elemento seleccionado con un movimiento de deslizamiento vertical.
• $.fn.slideUp Oculta el elemento seleccionado con un movimiento de deslizamiento vertical.
• $.fn.slideToggle Muestra o oculta el elemento seleccionado con un movimiento de deslizamiento vertical, dependiendo si actualmente el elemento está visible o no.

Uso básico de un efecto incorporado

$('h1').show();

6.2.1. Cambiar la duración de los efectos

Con la excepción de $.fn.show y $.fn.hide, todos los métodos tienen una duración predeterminada de la animación en 400 milisegundos. Este valor es posible cambiarlo.

Configurar la duración de un efecto

$('h1').fadeIn(300);      // desvanecimiento en 300ms
$('h1').fadeOut('slow');  // utilizar una definición de velocidad interna

jQuery.fx.speeds

jQuery posee un objeto en jQuery.fx.speeds el cual contiene la velocidad predeterminada para la duración de un efecto, así como también los valores para las definiciones slow y fast.

speeds: {
    slow: 600,
    fast: 200,
    // velocidad predeterminada
    _default: 400
}

Por lo tanto, es posible sobrescribir o añadir nuevos valores al objeto. Por ejemplo, puede que quiera cambiar el valor predeterminado del efecto o añadir una velocidad personalizada.

Añadir velocidades personalizadas a jQuery.fx.speeds

jQuery.fx.speeds.muyRapido = 100;
jQuery.fx.speeds.muyLento = 2000;

6.2.2. Realizar una acción cuando un efecto fue ejecutado

A menudo, querrá ejecutar una acción una vez que la animación haya terminado — ya que si ejecuta la acción antes que la animación haya acabado, puede llegar a alterar la calidad del efecto o afectar a los elementos que forman parte de la misma. [Definición: Las funciones de devolución de llamada (en inglés callback functions) proveen una forma para ejecutar código una vez que un evento haya terminado.]

En este caso, el evento que responderá a la función será la conclusión de la animación. Dentro de la función de devolución, la palabra clave this hace referencia al elemento en donde el efecto fue ejecutado y al igual que sucede con los eventos, es posible transformarlo a un objeto jQuery utilizando $(this).

Ejecutar cierto código cuando una animación haya concluido

$('div.old').fadeOut(300, function() { $(this).remove(); });

Note que si la selección no retorna ningún elemento, la función nunca se ejecutará. Este problema lo puede resolver comprobando si la selección devuelve algún elemento; y en caso que no lo haga, ejecutar la función de devolución inmediatamente.

Ejecutar una función de devolución incluso si no hay elementos para animar

var $thing = $('#nonexistent');

var cb = function() {
    console.log('realizado');
};

if ($thing.length) {
    $thing.fadeIn(300, cb);
} else {
    cb();
}