背景から別のものにフェードインする

Question

私の要素がbackground-image：background1.pngを持っているとします。

要素の背景フェードインをbackground2.pngにするには、最初のフェードインをフェードアウトさせないでください。

Answer 1

最初の要素のすぐ上に2番目の要素（background2.png付き）を配置します。 2番目の要素を消してください。

Answer 2

本当に、これを行うための簡単でエレガントな方法はありません。 CSSアニメーションは、不透明度のようなものには中間値がある（つまり連続している）という事実に依存しています。

divを個別にバックグラウンドで区切り、それぞれの上に配置しなければならない場合があります。その後、デフォルトで2番目を非表示にし、背景に変更する場合はfadeIn('slow')に電話してください。

Answer 3

基本的にあなたはjQueryを使ってそれを自動化することができます。

$('.oldclass').prepend('<div class="newclass"></div>'); 
    $('.newclass').fadeIn('slow'); 

の作業のデモを：

http://snook.ca/archives/javascript/jquery-bg-image-animations

：

Answer 4

http://jsfiddle.net/AlienWebguy/GKUnF/は、私はそれを行う方法が明確に説明された素敵なURLを見つけましたしかし、これを達成するためにCSSスプライトを使用して、両方を含むイメージを作成する必要があります。