Desvanecimiento de imágenes de fondo con JavaScript

A diferencia de desvanecer un color de fondo, desvanecer una imagen de fondo no es una tarea sencilla con jQuery. Esto se debe a que las imágenes de fondo no se tratan como elementos en el DOM, sino como propiedades CSS.

Sin embargo, una solución inteligente es usar etiquetas con posicionamiento absoluto y un índice z negativo para crear el ilusión de una imagen de fondo. Al ocultar estas imágenes de forma predeterminada y desvanecerlas con jQuery, podemos simular el efecto de desvanecer una imagen de fondo.

Aquí se explica cómo hacerlo paso a paso:

1. Agregue etiquetas a su HTML:

Agregue una etiqueta para cada imagen de fondo que desee desvanecer. Colóquelos absolutamente y asígneles un índice z negativo para colocarlos detrás de todos los demás elementos:

img {
  position: absolute;
  z-index: -1;
  display: none;
}

2. Escriba el código jQuery:

Utilice el método each() de jQuery para iterar a través de las etiquetas y atenuarlas dentro y fuera en secuencia. Aquí hay un ejemplo:

function fadeImages() {
  $("img").each(function(index) {
    $(this)
      .hide()
      .delay(3000 * index) // delay each image by 3 seconds
      .fadeIn(3000)
      .fadeOut()
  });
}

3. Llame a la función:

Llame a la función fadeImages() para iniciar el proceso de desvanecimiento.

Para ver un ejemplo funcional, consulte la demostración en vivo en http://jsfiddle.net/ RyGKV/