背景色のフェードとは異なり、背景画像のフェードアウトは 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 サイトの他の関連記事を参照してください。