Desaparecendo imagens de fundo com JavaScript

Ao contrário de desbotar uma cor de fundo, desbotar uma imagem de fundo não é uma tarefa simples com jQuery. Isso ocorre porque as imagens de fundo não são tratadas como elementos no DOM, mas sim como propriedades CSS.

No entanto, uma solução alternativa inteligente é usar tags com posicionamento absoluto e um índice z negativo para criar o ilusão de uma imagem de fundo. Ao ocultar essas imagens por padrão e esmaecê-las com jQuery, podemos simular o efeito de esmaecimento de uma imagem de fundo.

Veja como fazer isso passo a passo:

1. Adicione tags ao seu HTML:

Adicione uma tag para cada imagem de fundo que você deseja esmaecer. Posicione-os de forma absoluta e dê-lhes um índice z negativo para colocá-los atrás de todos os outros elementos:

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

2. Escreva o código jQuery:

Use o método each() do jQuery para iterar pelas tags e esmaecê-las em sequência. Aqui está um exemplo:

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

3. Chame a função:

Chame a função fadeImages() para iniciar o processo de desbotamento.

Para obter um exemplo prático, confira a demonstração ao vivo em http://jsfiddle.net/ RyGKV/