HTML タグと絶対配置を使用して jQuery で背景画像のフェードを実現するにはどうすればよいですか?

背景画像のフェード: jQuery を使用した代替アプローチ

jQuery のアニメーション メソッドを使用して背景画像を直接フェードしようとすると、無駄になる可能性があります。ただし、この課題には独創的な解決策があります。

背景画像をフェードアウトする代わりに、HTML の使用を検討してください。画像を表示するためのタグです。絶対位置 (position:absolute) と負の Z インデックス (z-index:-1) の CSS ルールを適用することで、これらの画像は他の要素の後ろに残りながら背景画像を模倣できます。

この設定では、次のことができます。画像に対する jQuery のフェード効果を利用して、必要な背景のフェード効果を作成します。以下に例を示します。

HTML:

<code class="html"><img  src="/static/imghwm/default1.png" data-src="image1.jpg" class="lazy" alt="HTML タグと絶対配置を使用して jQuery で背景画像のフェードを実現するにはどうすればよいですか?" >
<img  src="/static/imghwm/default1.png" data-src="image2.jpg" class="lazy" alt="HTML タグと絶対配置を使用して jQuery で背景画像のフェードを実現するにはどうすればよいですか?" ></code>

CSS:

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

jQuery :

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

このスクリプトは画像を次々とフェードさせ、異なる背景間のスムーズな移行を作成します。

ライブ デモ:

この手法の実際のデモンストレーションについては、http://jsfiddle.net/RyGKV/ にアクセスしてください。

以上がHTML タグと絶対配置を使用して jQuery で背景画像のフェードを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。