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();