新しい背景をフェードインして10秒後にフェードアウト

Question

私は10秒ごとに自分のウェブサイトの背景を変更しようとしました。それは成功しました。フェードインしてフェードアウトするので、スムーズに表示されます。私は他の流行を探して関連する質問を見つけましたが、回答をうまく理解することができませんでした。

Javascriptを：

function run(interval, frames) { 
var int = 1; 

function func() { 
    document.body.id = "b"+int; 
    int++; 
    if(int === frames) { int = 1; } 
} 

var swap = window.setInterval(func, interval); 
} 

run(10000, 6); //milliseconds, frames 

CSS：

#b1 { background-image: url("standaard01.jpg"); } 
#b2 { background-image: url("standaard02.jpg"); } 
#b3 { background-image: url("standaard03.jpg"); } 
#b4 { background-image: url("standaard04.jpg"); } 
#b5 { background-image: url("standaard05.jpg"); } 
#b6 { background-image: url("standaard06.jpg"); } 
#b7 { background-image: url("standaard07.jpg"); } 
#b8 { background-image: url("standaard08.jpg"); } 
#b9 { background-image: url("standaard09.jpg"); } 
#b10 { background-image: url("standaard10.jpg"); } 

Answer 1

は、残念ながら、それは単一の要素の背景に設定した2枚の画像間で移行することはできません。 （修正：それは、要素の背景画像プロパティをアニメーション化することによって与えられたブラウザサポートです）

しかし、別の要素がその背後にある間、1つの要素をフェードアウトすることができます。

Jqueryには、この場合に使用できる.fadeToggle()というメソッドがあります。

CSSプロパティを使用して、img要素またはdivのbgイメージを重ねて配置します。

JavaScriptループでは、現在表示されているdivの.fadetoggle()が10秒ごとに表示され、次の画像が表示されます。あなたは、インデックス変数で状態を追跡することができます。

最後の要素に達したら、再び上の画像をフェードします。 2番目の要素が消える前に残りの要素が.show()になるので、もう一度表示されます。

z-indexについての注意：CSSプロパティーのz-indexは、要素を先頭または他の要素の後ろに配置します。そのため、各項目の正しいz-インデックスをCSSクラスに設定するか、ページの読み込み時にプログラムで設定することをお勧めします。

画像サイズメモ：画像またはdivのサイズが異なる場合は、1つをフェードインし、もう一方をフェードアウトさせます。ここからは、異なるクロスフェード方法について話すことができるが、それはこの議論の範囲を超えてい

幸運:)