Javascript 更改div的背景图像url

我有一个div，我想通过改变css背景图像在背景中显示多个图像，但我找不到最好的方法

我的HTML：

<div id="background"></div>

CSS:

使用：

Jsfiddle：

而不是：

var interval = self.setInterval("swapBkgnd()", 5000) // wrong syntax

对于动画：

$('#background')
    .animate({opacity: 0}, 'slow', function() {
        $(this)
            .css({'background-image': "url(" + bgArr[i] + ")"})
            .animate({opacity: 1});
    });

使用：

Jsfiddle：

而不是：

var interval = self.setInterval("swapBkgnd()", 5000) // wrong syntax

对于动画：

$('#background')
    .animate({opacity: 0}, 'slow', function() {
        $(this)
            .css({'background-image': "url(" + bgArr[i] + ")"})
            .animate({opacity: 1});
    });

设置如下：

function swapBkgnd() {
  if (i > (bgArr.length - 1)) {
    i = 0;
  }
  $("#background").fadeOut("slow", function () {
    $(this).css("background-image", "url(" + bgArr[i] + ")");
    $(this).fadeIn("slow");
  });
  i++;
};

设置如下：

function swapBkgnd() {
  if (i > (bgArr.length - 1)) {
    i = 0;
  }
  $("#background").fadeOut("slow", function () {
    $(this).css("background-image", "url(" + bgArr[i] + ")");
    $(this).fadeIn("slow");
  });
  i++;
};

关于这个答案

关于这个答案

---

非常好的工作，但是没有褪色效果。你想在图像改变时添加褪色效果，对吗？@shaik这是正确的答案，淡入效果应该由您来完成。首先感谢您的帮助，我遇到了一个问题，即淡入整个div，这不应该是这样，因为div中的内容也在淡入。如果您能在这方面帮助我，我会为mesuperb提供更多帮助，但淡入效果没有发生。您想在图像更改时添加淡入效果吗？@shaik这是正确的答案，淡出效果应该由你来做。首先感谢你的帮助，我有一个问题，是淡出整个div，这不应该是这样的，因为div中的内容也在淡出如果你能在这个世界上帮助我，对我会有更多的帮助

var interval = self.setInterval(swapBkgnd, 5000)

function swapBkgnd() {
    if (i > (bgArr.length - 1)) {
        i = 0
        $('#background').fadeTo('slow', 0.3, function(){
            $(this).css('background-image', 'url(' + bgArr[i] + ')');
        }).fadeTo('slow', 1);
    } else {
        $('#background').fadeTo('slow', 0.3, function(){
            $(this).css('background-image', 'url(' + bgArr[i] + ')');
        }).fadeTo('slow', 1);
}
i++;
};