jQuery で背景画像をフェードできませんか?ソリューションのロックを解除する

jQuery で背景画像をフェードできませんか?これを試してください

jQuery を使用して背景画像をフェードアウトしようとしましたが、次のようないくつかのアプローチが失敗することが判明しました。

var x = 0;

while (true) {
    /* change background-image of #slide using some variation
    of animate or fadeIn/fadeOut with or without setTimeout */
    x++;
}

解決策:

この問題の鍵は、jQuery が背景画像を直接フェードできないという事実にあります。これを回避するには、 を使用します。タグを使用して画像を表し、最初は display: none; を使用して画像を非表示にします。位置を絶対に設定し、z-index を -1 に設定して背景の動作を模倣し、他のすべての要素の背後に強制的に表示します。

この効果を実現する方法の例を次に示します。

HTML:

<img src=".." />
<img src=".." />

CSS:

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

jQuery:

function test() {
    $("img").each(function(index) {
        $(this).hide();
        $(this).delay(3000 * index).fadeIn(3000).fadeOut();
    });
}
test();

Aライブデモは http://jsfiddle.net/RyGKV/ でご覧いただけます。

以上がjQuery で背景画像をフェードできませんか?ソリューションのロックを解除するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。