Фоновое изображение исчезает в jquery

Question

Я пытаюсь сделать fade backgrounds в jQuery и CSS, это мой код, но он не работает. Есть идеи?

var images = ['bg.jpg', '_4.jpg', '_5.jpg', '_6.jpg']; 
var i = 0; 

setInterval(function(){ 
$('body').animate({opacity: 0}, 'slow', function() { 
     $(this) 
      .css('background-image', function() { 
     if (i >= images.length) { 
      i=0; 
     } 
     return 'url(' + images[i++] + ')'; 
    }); 
      .animate({opacity: 1}); 
    }); 
}, 1000); 
}); 

Answer 1

Вы можете анимировать фоновый цвет, но не фоновые изображения, я тоже бил головой о эту стену.

Смотреть здесь- Fade in new background images on scroll

Как и в ответ на мой вопрос, вам нужно использовать <img> «S с отрицательным Z-индекс и исчезают те, в.

Это, как я сделал IT-

CSS

#img1, #img2, #img3, #img4 { 
    width:100%; 
    height:100%; 
    display:none; 
    position:fixed; 
    z-index:-1; 
} 

JQuery

$(document).scroll(function() { 
    var y = $(this).scrollTop(); 
    if (y > 150) { 
     $('#img2').fadeIn(); 
    } 
    else {$('#img2').fadeOut('fast')}; 

    if (y > 300) { 
     $('#img3').fadeIn(); 
    } 
    else {$('#img3').fadeOut('fast')}; 

    if (y > 450) { 
     $('#img4').fadeIn(); 
    } 
    else {$('#img4').fadeOut('fast')}; 
}); 

Answer 2

setInterval(function(){ 
      $('.light').animate({opacity: 0}, 4000, function() { 
       $('.light').css({background:'url(./images/' + images[i++] + ') no-repeat top center'}).animate({opacity: 1},4000); 
       if (i >= images.length) { i=0; } 
      }); 
     }, 4000); 

это один должен работать я попробовать это на DIV