JavaScript を使用して背景画像をフェードする方法: ステップバイステップ ガイド

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

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

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

段階的にその方法を説明します:

1. を追加します。 HTML へのタグ:

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

<code class="html"><img src="image1.jpg">
<img src="image2.jpg"></code>

<code class="css">img {
  position: absolute;
  z-index: -1;
  display: none;
}</code>

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

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

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

3.関数の呼び出し:

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

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

以上がJavaScript を使用して背景画像をフェードする方法: ステップバイステップ ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。