使用jquery连续淡化和淡出背景图像

Question

下面的代码不断更改div的背景图片。请问如何淡入淡出而不仅仅是改变？

var imageFile = ["1.jpg", "2.jpg", "3.jpg", "4.jpg"];
   var currentIndex = 0;
   setInterval(function () {
     if (currentIndex == imageFile.length) {
        currentIndex = 0;
     }
     $("#custom_body").css('background-image', 'url("images/' + imageFile[currentIndex++] + '")');
   }, 3000);

我该怎么办？

Answer 1

$(document).ready(function () {

    var seconds = 3000;
    var step = 0;
    var limit = 3;

    $("#custom_body").addClass("image-" + step).fadeIn(700);

    setInterval(function () {
        $("#custom_body").fadeOut(700, function () {
            $(this).removeClass("image-" + step);
            step = (step > limit) ? 0 : step + 1;
            $("#custom_body").addClass("image-" + step).fadeIn(700);
        });
    }, seconds);
});