jquery - Jquery 将 fadeOut / In 更改为 fadeTo

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