Vamos a conocer otra manera de aplicar efectos a elementos de la página, a través de los métodos de fading de jQuery. Son métodos muy sencillos de aplicar y que sirven para crear efectos bastante atractivos, donde se produce un fundido a través del cambio de la propiedad opacity de CSS.

A lo largo del Manual de jQuery que venimos publicando en DesarrolloWeb.com hemos utilizado alguno de estos métodos para hacer efectos rápidos en jQuery, pero ahora los vamos a explicar de manera más detenida. Además, realizaremos nuevas prácticas con estos tipos de efectos de cambio de opacidad y trabajaremos con las funciones callback para realizar una pequeña cadena de efectos, que se ejecutan cuando los anteriores hayan acabado.

Recordemos que CSS tiene una propiedad para alterar la opacidad de los elementos. Todos los valores de Opacity se expresan con números de 0 al 1. Con un valor de cero haría que el elemento fuera totalmente transparente y opacity con un valor de 1 sería totalmente opaco.

Con los métodos de fading de jQuery se puede cambiar esa propiedad. Existen tres métodos para crear efectos de fundido, los siguientes:

Método fadeOut()
Este método hace que el elemento que lo recibe desaparezca de la página a través del cambio de su opacidad, haciendo una transición suavizada que acaba con el valor de opacity cero.

Método fadeIn()
El método fadeIn() hace que el elemento que lo recibe aparezca en la página a través del cambio de su opacidad, haciendo una transición suavizada que acaba con el valor de opacity 1. Este método sólo podremos observarlo si el elemento sobre el que lo invocamos era total o parcialmente transparente, porque si era opaco al hacer un fadeIn() no se advertirá ningún cambio de opacidad.

Método fadeTo()
El tercer método para hacer efectos de fundidos es fadeTo() y es el más versátil de todos, puesto que permite hacer cualquier cambio de opacidad, a cualquier valor y desde cualquier otro valor. Este método recibe la duración deseada para el efecto, el valor de opacidad al que queremos llegar y una posible función callback.

Ejemplos con efectos de fundido fadeOut() y fadeIn() en jQuery

Para ilustrar el modo en el que se pueden hacer efectos de fundido con el cambio de opacidad hemos hecho un ejemplo de página donde se pueden ver todos los métodos de fading en funcionamiento, con algunas variantes interesantes.

Para hacernos una idea de lo que vamos a conseguir en este ejercicio, podemos ver el ejemplo en marcha.

En el ejemplo vamos a tener una lista como esta:

<ul id="milista">
   <li id="e1">Elemento 1</li>
   <li id="e2">Segundo elemento</li>
   <li id="e3">Tercer LI</li>
</ul>

Como vemos, tanto la lista (etiqueta UL) como los elementos (etiquetas LI) tienen identificadores (atributos id) para poder referirnos a ellos desde jQuery.

Ahora veamos cómo hacer que la lista desaparezca con un fundido hacia transparente, a partir de una llamada a fadeOut().

$("#milista").fadeOut();

Como se puede ver, fadeOut() en principio no recibe ningún parámetro. Aunque luego veremos que le podemos pasar un parámetro con una función callback, con código a ejecutarse después de finalizado el efecto.

Este sería el códio para que la lista vuelva a aparecer, a través de la restauración de su opacidad con una llamada a fadeIn().

$("#milista").fadeIn();

Ejemplo con fadeTo()

El método fadeTo es bastante más versátil, como ya se había adelantado. Para hacer un ejemplo interesante con este método tenemos que ver cómo se le pueden pasar distintos valores de opacidad y para ello hemos creado un campo select con distintos valores.

<select name="opacidad" id="selopacidad">
   <option value="0.2">20%</option>
   <option value="0.5">50%</option>
   <option value="0.8">80%</option>
   <option value="1">100%</option>
</select>

Como se puede ver, este SELECT tiene diferentes OPTION con algunos valores de opacidad. Los valores (atributos value de los OPTION) son números entre 0 y 1. Ahora vamos a mostrar el código de un evento que asociaremos a este campo SELECT, para ejecutar acciones cuando el usuario cambia el valor que aparece en él. Cuando el SELECT cambie, queremos actualizar el valor de opacity de los elementos H1 de la página.

$("#selopacidad").change(function(e){
   var opacidad_deseada = e.target.options[e.target.selectedIndex].value
   $("h1").fadeTo(1000,opacidad_deseada);
});

En este código estamos definiendo un evento "onchange" sobre el SELECT anterior. En la primera línea de la función se está extrayendo la opacidad deseada y para ello se accede a la propiedad target del objeto evento que se recibe en la función que enviamos al método change().

Una vez tenemos esa opacidad deseada, recogida del value del OPTION seleccionado, podemos ver la siguiente línea de código, en la que hacemos el fadeTo().

Veamos que fadeTo() recibe en principio dos métodos. El primero es la duración en milisegundos del ejemplo. El segundo es el valor de opacidad que queremos aplicar.

Enviando funciones callback

Los tres métodos que estamos viendo para hacer fading, como cualquiera de los existentes en jQuery, permiten el envío de un parámetro como función callback.

Con este código conseguimos que se ejecute un fadeIn() después de un fadeOut(), para conseguir un efecto de parpadeo, en el que primero se oculta el elemento y cuando desaparece se vuelve a mostrar restaurando su opacidad.

$("#milista").fadeOut(function(){
   $(this).fadeIn();
});

Como vemos, se está indicando una función callback y dentro de la misma, this es una referencia al objeto jQuery que recibió el anterior método. Osea, con $("#milista").fadeOut() se hace un efecto de fundido para que desaparezca el elemento "#milista". Luego la función callback se ejecutará cuando ese elemento termine de desaparecer. Dentro de esa función callback se accede a $(this) para tener una referencia a "#milista" y sobre ese elemento invocamos al método fadeIn() para hacer que aparezca de nuevo la lista.

Ahora vamos a mostrar otro ejemplo de callback un poco más adelantado, en el que se encadenan varias funciones callback, que se ejecutarían una detrás de la otra.

var opacidad_deseada = $("#selopacidad").attr("value");
$("#e1").fadeTo(500, opacidad_deseada, function(){
   $("#e2").fadeTo(500, opacidad_deseada, function(){
      $("#e3").fadeTo(500, opacidad_deseada);
   });
});

En este código hacemos un efecto de fadeTo() sobre cada uno de los elemento de la lista. Para definir qué opacidad queremos aplicar a esos elementos utilizamos de nuevo el campo SELECT que habíamos visto anteriormente en este artículo. Pero en esta ocasión utilizamos una manera distinta de acceder al valor de opacidad que hay seleccionado, a través del método attr() de jQuery.

En el código anterior primero se ejecuta el cambio de opacidad en el primer elemento, luego en el segundo y por último en el tercero, siempre hacia la misma "opacidad_deseada" que se había recuperado en el SELECT.

Código completo del ejemplo de fading en jQuery

A continuación podemos ver el código completo de trabajo con los métodos de fading disponibles en jQuery.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="es">
<head>
<title>Fading en jQuery</title>
   <script src="../jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){
   $("#ocultartoda").click(function(e){
      $("#milista").fadeOut();
   });
   $("#mostrartoda").click(function(e){
      $("#milista").fadeIn();
   });
   $("#ocultarmostrar").click(function(e){
      $("#milista").fadeOut(function(){
         $(this).fadeIn();
      });
   });
   $("#selopacidad").change(function(e){
      var opacidad_deseada = e.target.options[e.target.selectedIndex].value
      $("h1").fadeTo(1000,opacidad_deseada);
   });
   $("#pororden").click(function(e){
      var opacidad_deseada = $("#selopacidad").attr("value");
      $("#e1").fadeTo(500, opacidad_deseada, function(){
         $("#e2").fadeTo(500, opacidad_deseada, function(){
            $("#e3").fadeTo(500, opacidad_deseada);
         });
      });
   })
})
</script>
</head>
<body>
   <h1>Fading en jQuery</h1>
   <b>Mostrar y ocultar elementos de forma suavizada con fading</b>
   <p>
      <a href="#" id="ocultartoda">ocultar toda la lista</a> |
      <a href="#" id="mostrartoda">Mostrar toda la lista</a> |
      <a href="#" id="ocultarmostrar">Ocultar la lista y luego mostrarla</a>
   </p>
   <form name="f1">
      Cambia la opacidad del elemento H1 a: <select name="opacidad" id="selopacidad">
         <option value="0.2">20%</option>
         <option value="0.5">50%</option>
         <option value="0.8">80%</option>
         <option value="1">100%</option>
      </select>
      <br>
      <a href="#" id="pororden">Cambiar la opacidad de los elementos de la lista por orden</a>
   </form>
   
   <ul id="milista">
      <li id="e1">Elemento 1</li>
      <li id="e2">Segundo elemento</li>
      <li id="e3">Tercer LI</li>
   </ul>
   
</body>
</html>

Si lo deseamos, podemos ver el ejemplo en marcha en una página aparte.