Question

我创建了具有淡入淡出的多个图像的视差。

   var images = [
    "images/BGK.png",
    "images/slide_2.png",
    "images/PhilBlm.jpg"
    ];
    $bg = $("#elem"),
    n = images.length,
    c = 0; 

    for(var i=0; i<n; i++){
    var tImg = new Image();
    tImg.src = images[i];
    }


    (function loopBg(){
        var bg = $bg.css({backgroundImage : "url("+images[++c%n]+")"})
        bg.fadeOut(4500, function () {
            loopBg()
        }).fadeIn(4000); 
    }());

这是我的脚本..这样我就可以使用fadeIn fadeOut方法显示图像。

我想做的是在图像完全淡出之前，我要在另一个图像中淡入淡出，原因是此脚本在下一个图像淡入之前等待第一个图像完全淡出。.

Answer 1

尝试：

(function loopBg(){
        var bg = $bg.css({backgroundImage : "url("+images[++c%n]+")"})
        bg.fadeOut(4500, function () {
            loopBg()
        })
        bg.fadeIn(4000); 
    }());

Answer 2

您可以使用delay()对动画进行排队，因此淡入将在淡出后0.5秒开始。

(function loopBg(){
    var bg = $bg.css({backgroundImage : "url("+images[++c%n]+")"})
    bg.fadeOut(4500, function () {
        loopBg()
    });
    bg.delay(500).fadeIn(4000); 
}());

淡入淡出多个图像背景

2 个答案: