JavaScript を使用した背景画像のフェード

背景色のフェードとは異なり、背景画像のフェードは jQuery では簡単な作業ではありません。これは、背景画像が DOM 内の要素としてではなく、CSS プロパティとして扱われるためです。

ただし、賢明な回避策は、絶対位置と負の Z インデックスを持つ タグを使用して、背景画像の錯覚。これらの画像をデフォルトで非表示にし、jQuery を使用してフェードインおよびフェードアウトすることで、背景画像のフェード効果をシミュレートできます。

これを段階的に行う方法は次のとおりです:

1. HTML に タグを追加します:

フェードしたい背景画像ごとに タグを 1 つ追加します。それらを絶対的に配置し、他のすべての要素の後ろに配置するために負の Z インデックスを指定します:

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

2. jQuery コードを記述します。

jQuery の each() メソッドを使用して、 タグを反復処理し、順番にフェードインおよびフェードアウトします。以下に例を示します。

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

3.関数の呼び出し:

fadeImages() 関数を呼び出して、フェーディング プロセスを開始します。

実際の例については、http://jsfiddle.net/ でライブ デモを確認してください。 RyGKV/