Question

我正在努力获得平滑的背景图像转换，现在我有了这个：

$(window).load(function(){

var initialBg =  $('#apDiv1').css("background-image");

var firstTime = true;
var arr = ["url(bg-0.jpg)", "url(bg-1.jpg)"];
    (function recurse(counter) {
        var bgImage = arr[counter];
        if (firstTime == false) {
            $("#apDiv1").fadeOut(700, function(){
                $('#apDiv1').css('background-image', bgImage);
            });
            $("#apDiv1").fadeIn(700);
        } else {
            firstTime = false;
        }               
        delete arr[counter];
        arr.push(bgImage);
        setTimeout(function() {
            recurse(counter + 1);
        }, 6600);
    })(0);      
});

但是这会造成某种死角，那里有半秒没有任何背景图像。

我已尝试更改为fadeTo，但无法确定如何进行更改。任何帮助表示赞赏。

Answer 1

使用以下代码，它适用于您：

$(window).load(function(){

var initialBg =  $('#apDiv1').css("background-image");

var firstTime = true;
var arr = ["url(bg-0.jpg)", "url(bg-1.jpg)"];
    (function recurse(counter) {
        var bgImage = arr[counter];
        if (firstTime == false) {
            $("#apDiv1").fadeTo(700, 0.1, function(){
                $('#apDiv1').css('background-image', bgImage);
            });
            $("#apDiv1").fadeTo(700,1);
        } else {
            firstTime = false;
        }               
        delete arr[counter];
        arr.push(bgImage);
        setTimeout(function() {
            recurse(counter + 1);
        }, 6600);
    })(0);      
});

Answer 2

为什么不将de fadeIn放入回叫中？

正如评论中所说的那样，当2个div同时淡入/淡出时，效果会更好。

$(window).load(function(){

    var initialBg =  $('#apDiv1').css("background-image");

    var arr = ["url(bg-0.jpg)", "url(bg-1.jpg)"];
    $("#apDiv1").fadeOut(700, function(){
          $('#apDiv1').css({'background-image' : arr[1]});
          $("#apDiv1").fadeIn(700);
        });    
    });

Jquery将fadeOut / In改为fadeTo

2 个答案: