javascript - 淡出背景图像 jQuery 时去除白色 'flash' 效果

Question

我试图在淡化背景图像时摆脱背景颜色的白色闪光。我希望图像彼此淡入/淡出。

这是我的 jQuery、HTML 和 CSS 代码

HTML:

<div id="wrapper"></div>

Javascript:

 $(window).load(function() {          
          var i =0;
          var images = ['assets/img/cake_2.jpg','assets/img/cake_3.jpg', 'assets/img/cake_1.jpg'];
          var image = $('#wrapper');
                        //Initial Background image setup
          image.css('background-image', 'url(assets/img/cake_1.jpg)');
                        //Change image at regular intervals
          setInterval(function(){  
           image.fadeOut(6000, function () {
           image.css('background-image', 'url(' + images [i++] +')');
           image.fadeIn(6000);
           });
           if(i == images.length)
            i = 0;
          }, 1000);           
});

CSS:

#wrapper {
    width:              100%;
    height:             100%;
    margin:             0 auto;
    z-index:            -1;
    position:           absolute;
    overflow:           hidden;
}

Answer 1

在下一张图像开始淡入之前，您正在完全淡出当前图像。这会导致动画中间出现白色背景。这是一个解决方案:

• 使用绝对定位和 z-index 在当前可见的 div 后面放置一个包含下一个图像的 div
• 淡出当前 div

这样，当前图像会平滑地淡入下一张图像。

$(window).load(function () {
    var i = 0;
    var images = [
        'http://dummyimage.com/300x200/FC0/000&text=Slide+1',
        'http://dummyimage.com/300x200/CF0/000&text=Slide+2',
        'http://dummyimage.com/300x200/0FC/000&text=Slide+3'];
    $('#wrapper').css('background-image', 'url(' + images[i] + ')');
    setInterval(function () {
        if (++i === images.length) {
            i = 0;
        }
        console.log(i);
        $('#nextimg').css('background-image', 'url(' + images[i] + ')');
        // transition animation: 2s
        $('#wrapper').fadeOut(2000, function () {
            $('#wrapper').css('background-image', 'url(' + images[i] + ')').show();
        });
        // slide change: 3s
    }, 3000);
});

Demo