jquery - 背景图像在jquery中淡入淡出

Question

我正在尝试在 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>具有负 z-index 并淡化它们。

我是这样做的-

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')};
});