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