fadeInクリック時の背景画像

Question

私は、ナビゲーションバーのリンクがクリックされたときに文書の背景画像を変更する作業コードを持っています。背景画像はアニメーションなしで即座に変化します。私はどのようにして新しい背景画像fadeIn（）を作成できますか？ ？

JS

$('.navigation a').click(function() { 
    currentBg = $(this).attr('href').replace('#', '') +'.jpg'; 
    $('.background').css({'background-image':'url(images/skins/'+currentBg+')'}); 
}); 

Answer 1

私はあなたができると信じていない、唯一の方法は、（私の知っていること）の背景を持っており、それが背後に現れるブロック要素（例えばdiv要素）を持っているだろうあなたのコンテンツの残りの部分（絶対的に配置）とフェードインではなく、背景を切り替える。

Answer 2

不透明度を変更して背景画像をアニメーション表示することはできません。

さまざまなセクションで必要な不透明度の画像を作成し、背景位置をアニメーション化してfadeInの動作を与えることができます。

このlinkをご覧ください。

Answer 3

背景イメージをフェードインする可能性はありません。コンテナを作成し、背景イメージをフェードインまたはフェードアウトするように設定する必要があります。

Answer 4

私はこれまで、「フェードイン」したい背景画像の上にある別のdivにフォアグラウンド画像をフローティングし、フォアグラウンド画像にjqueryフェードアウトエフェクトを作成しました。

同様のトリックを使用して、半透明の「背景」にテキストを設定することができます。

http://css-tricks.com/non-transparent-elements-inside-transparent-elements/

Answer 5

私はint0x90に同意します。

1. アクティブクラスを追加DIV
2. のIDを設定し
3. 絶対各画像位置のdiv要素、絶対的なスタイルの位置、スタイルであなたのイメージをスタック：

   は何ができることは、これがあります、0

4. から10
5. セットのdivのzインデックス内のすべての非アクティブな画像のzインデックスを持つあなたは、スタックの最上部に最高のzインデックスを持つ画像を引っ張ってZインデックスを使用することができます
6. クラスをナビゲーションバーリンクのオンクリックでアクティブにして、このクラスを前回のクリックから削除して、イメージのZ-インデックスが0に戻され、オーバーライドされないようにします。 jqueryの中
7. 、あなたは今、不透明度の変更を使用することができるかもしれおよび変更

の速度は、これはあなたが始めるのに役立ちます願っています！

Answer 6

すでに述べたように、ブロック要素をバックグラウンドとして使用しない限り不可能です。 アニメーションだけが必要な場合は、.gifをバックグラウンドとして持つことができます。アニメーションが終了すると、実際のイメージと置き換えられます.gifはそれ自体を繰り返さないようにします。