JQuery Navbar背景画像のシャッフルの問題

Question

私は、Navbarの背景画像がタイマーに設定された別の画像をシャッフルすることを望んでいました。シャッフルするようにしましたが、画像が消えるとメニューとロゴが消え、次の画像が現れると戻ってきます。私が持っているもう一つの問題は、画像が新しい画像にフェードしないが、それは空白になり、次の画像を示すということです。

問題： 1）メニューとロゴは、背景イメージと共にフェードします。 2）次の画像に変更すると、背景画像が空白になります。

試してみました： 1）var要素ではなく、喜びはありません。私はロゴとメニューのために.ignoreというクラスを作成しました。 2）JQueryの新機能としてこれを解決する方法がわかりません。

のjQueryコード：

$(function(){ 
    var i =0; 
    var images = ['assets/img/storm-ocean-hurricane-florida-beach-coast-travel.jpg','assets/img/arctic_sunset.jpg','assets/img/fallflood.jpg','assets/img/landscape-with-fog-and-chimney-smoke-at-sunset.jpg']; 
    var image = $('.navbar').not('.ignore'); 
    image.css('background-image', 'url(assets/img/storm-ocean-hurricane-florida-beach-coast-travel.jpg)'); 
    setInterval(function(){ 
     image.fadeOut(1000, function() { 
      image.css('background-image', 'url(' + images[i] +')'); 
      image.fadeIn(1000); 
     }); 
     if(i == (images.length - 1)){ 
      i = 0; 
     } else { 
      i++; 
     } 
    }, 5000); 
}) 

Answer 1

私はあなたのJSで明示的に何も悪いことを見ていないんだけど、私はあなたのnavbar内の新しいHTML要素を作成することによって、あなたの問題をすべて解決することができると思いますこれは、背景画像のみを保持することを意味し、他のすべての要素の背後に配置され、それらを妨げないようにします。マークアップは<div class="navbar__bg"></div>になります。

、このような要素は次のようになるためのCSS：

.navbar { 
    position: relative; /* needed to allow your bg element to properly position */ 
} 

.navbar__bg { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    z-index: -1; 
} 

そして、あなたがあなたのjQueryの4行目を変更したい：私が持っているもう一つの問題がある」

var image = $('.navbar__bg');

イメージが新しいイメージにフェードインしないが、ブランクになり、次のイメージが表示されます。

この場合、コードは現在完全にフェードアウトされ、イメージが変更されてからフェードインされます。2つのイメージをクロスフェードして相互にブレンドしますか？これは、複数の要素が同時にフェードインまたはフェードインする際に、複数の要素をオーバーラップさせる必要があります。 1つの要素上でbackground-imageを変更すると、クロスフェードを実行できません。