コンテンツに影響を与えるJQueryのアニメーション化された背景

Question

jQueryアニメーションを設定して、サイトのヘッダーにあるdivの背景イメージを変更しました。

イメージはコンテナよりも大きく、アニメーション化するとアニメーションの間、その要素が一時的に隠されます。

私はおそらく明らかに何かを見逃してしまった、誰でも助けることができますか？

jQueryの下、ここでは例：

（例は今除去が、別のdivとDIVの背景画像をアニメーションにより複製することができる（背景）上部に浮い）

var currentBackground = 1; 

function changeHeader() { 
currentBackground++; 
    if (currentBackground>6) currentBackground = 1; 

     jQuery('.slider').fadeOut(1000,function() { 
      jQuery('.slider').css('background', 'url(\'/myurl/images/sliders/home- slide'+currentBackground+'.jpg\') no-repeat center'); 
      jQuery('.slider').fadeIn(1000); 
    }); 

    setTimeout(changeHeader,10000); 
} 


jQuery(document).ready(function($){ 
    setTimeout(changeHeader,10000); 
}) 

Answer 1

私は少し違った考え方をしてくれたので、コードのためにAramとStefanに感謝しました。

トリックが（ちょうどCSSクラスに適用されたときに、動作するようには思えません）以下のようにjQueryの文で、他のページ要素より低いZ-インデックスを設定することです：

var currentBackground = 1; 

function changeHeader() { 
    currentBackground++; 

    if (currentBackground>6) currentBackground = 1; 

    jQuery('.slider').fadeOut(1000,function() { 
     jQuery('.slider').css({'background-image': 'url(\'/myurl/images/sliders/home- slide'+currentBackground+'.jpg\')', 
           'background-repeat': 'no-repeat', 
           'background-position': 'center', 
           'z-index': '-1'}); 
     jQuery('.slider').fadeIn(1000); 
    }); 

    setTimeout(changeHeader,10000); 
} 


jQuery(document).ready(function($){ 
    setTimeout(changeHeader,10000); 
}) 

Answer 2

このような気にいらは、あなたがbackground-imageサイズ

if (currentBackground>6) currentBackground = 1; 

     jQuery('.slider').fadeOut(1000,function() { 
      jQuery('.slider').css({'background-image': 'url(\'/myurl/images/sliders/home- slide'+currentBackground+'.jpg\')', 
            'background-repeat': 'no-repeat', 
            'background-position': 'center', 
            'background-size': '100px 100px'}); 
      jQuery('.slider').fadeIn(1000); 
    }); 

Answer 3

$.fadeOut()がopacityを使用し、それが影響を与えることができますあなたのメニュー#navは、スライダーの上にあります#slider_1。