jQuery image slider 與 IE 半透明 png

手上有個網頁要做到許多張圖片輪撥 (slider)，圖片陰影部分是半透明，我使用 jQuery 的 fadeIn 和 fadeOut 來做這效果，寫好後用 FF 和 Chrome 看都沒問題，但是 IE 在淡入淡出時半透明的陰影會變成全黑，最後發現要在 img 加上和背景相同的背景顏色才能正確顯示 . . .

範例：js

$(document).ready(function(){
  //載入圖片 01~20.png
  var photoCnt = 20;
  var img = "";
  for (var i = 1; i <= photoCnt; i++){
    img = (i<=9)?'':'';
    $('#slide-photo').append(img);
  }
  $('#slide-photo img:first').show().addClass("active first");
  $('#slide-photo img:last').addClass("last");  
  //開始播放
  var ival = setInterval(function() {
    var active = $('#slide-photo img.active');
    var next = (active.hasClass("last"))?$('#slide-photo img:first'):active.next();
    active.fadeOut(500,function(){
      active.removeClass('active');
      next.addClass('active').fadeIn(500);
    });
  }, 3000);
});

css

#slide-photo {background-color: #0abab5;}
#slide-photo img {width: 445px; background-color: #0abab5; display: none;}

因為美編交給我的網頁中輪播的圖片不能用絕對定位 (position:absolute)，所以在這個範例必須要淡出後隱藏才能顯示下一張再淡入，比較漂亮的做法是用絕對定位，要淡出的 z-index 降低，要淡入的 z-index 增加。