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