HTML 要素を使用して jQuery で背景画像をフェードする方法

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

背景画像は、Web ページやアプリに視覚的な面白さを加える一般的な方法です。ただし、動的な効果を作成するために、複数の背景画像間を切り替えたい場合があります。

従来、jQuery の fadeIn および fadeOut 関数は、背景色の要素に対してのみ機能します。画像ごとに新しい HTML 要素を作成せずに背景画像をフェードアウトしようとすると、これが問題になります。

解決策:

この制限を克服するには、一般的な回避策は次のとおりです。 画像にタグを付けて、最初はdisplay:noneを使用して非表示にします。負の Z インデックスを使用して画像を絶対的に配置することで、画像を背景のように動作させることができます。段階的な解決策は次のとおりです。

1. 背景画像を に変換します。タグ:

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

2. CSS を使用して画像のスタイルを設定します:

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

3. jQuery を使用して画像をフェードインおよびフェードアウトします:

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

コード例:

実際の例については、次の JSFiddle リンクにアクセスしてください:

https://jsfiddle。 net/RyGKV/

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