2011-08-09 55 views
6

我只是想知道當jQuery不支持opacity時,jQuery如何在IE瀏覽器中產生淡入淡出效果?動畫opacity是他們在Firefox和Chrome等其他瀏覽器中淡入淡出的方式。 我進入代碼,但老實說,我找不到任何可以理解的東西!jQuery如何在IE8及更低版本中「淡入淡出」?

回答

9

從jQuery源,它們基本上檢測是否支持不透明性和如果沒有,使用的IE alpha濾鏡

if (!jQuery.support.opacity) { 
jQuery.cssHooks.opacity = { 
    get: function(elem, computed) { 
     // IE uses filters for opacity 
     return ropacity.test((computed && elem.currentStyle ? elem.currentStyle.filter : elem.style.filter) || "") ? 
      (parseFloat(RegExp.$1)/100) + "" : 
      computed ? "1" : ""; 
    }, 

    set: function(elem, value) { 
     var style = elem.style, 
      currentStyle = elem.currentStyle; 

     // IE has trouble with opacity if it does not have layout 
     // Force it by setting the zoom level 
     style.zoom = 1; 

     // Set the alpha filter to set the opacity 
     var opacity = jQuery.isNaN(value) ? 
      "" : 
      "alpha(opacity=" + value * 100 + ")", 
      filter = currentStyle && currentStyle.filter || style.filter || ""; 

     style.filter = ralpha.test(filter) ? 
      filter.replace(ralpha, opacity) : 
      filter + " " + opacity; 
    } 
}; 
} 
3

使用下述風格filter:alpha(opacity=40)