JQuery Navbar Проблемы с перетасовкой фонового изображения

Question

Я хотел, чтобы фоновое изображение моего навигатора было перемещено через разные изображения, установленные на таймере. Я получил его, чтобы перетасовать, но меню и мой логотип исчезают, когда изображение исчезает и возвращается, когда появляется следующее изображение. Еще одна проблема, я имею в виду, что изображение не исчезает в новом изображении, но оно становится пустым, а затем показывает следующее изображение.

Вопросы: 1) Меню и логотип исчезают вместе с фоновым изображением. 2) Фоновое изображение исчезает при смене на следующее изображение.

Пробовал: 1) Я пробовал использовать .not на моем элементе 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 не видя, но я думаю, что вы можете решить все ваши вопросы, создавая новый HTML элемент внутри вашей navbar который предназначен только для хранения фонового изображения и расположен за всеми остальными элементами, чтобы не мешать им. Разметка будет только <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 для:

var image = $('.navbar__bg');

«Еще один вопрос, у меня есть что изображение не исчезает в новом изображении, но оно становится пустым, а затем показывает следующее изображение ».

Что касается этого, то ваш код записывается в настоящее время полностью исчезает, меняет изображение, а затем исчезает. Говорят, вы хотите перечеркнуть два изображения, чтобы смешаться друг с другом? Это потребует перекрытия нескольких элементов, поскольку они одновременно исчезают и исчезают. Кроссфейд не может быть сделан путем изменения background-image на один элемент.