jQuery懸停和淡入效果在IE 8中緩慢

我一直在Firefox和IE 8中開發我的網站。在主頁面（以及攝影和繪圖部分）上存在圖像懸停效果。您可以在http://www.dgendill.com處看到源代碼。在Firefox中，效果完美。在IE 8中，它可以工作，但速度要慢得多。這就是我一直試圖提高速度：jQuery懸停和淡入效果在IE 8中緩慢

使用的優化jQuery庫

縮小了與它的jQuery遍歷DOM範圍。例如：

$(".sectionLink","#divLandingPage").hover(
    function(){ 
     $(this).addClass("hover"); 
     $(this).fadeTo(100,.8); 
    }, 
    function(){ 
     $(this).removeClass("hover"); 
     $(this).fadeTo(100,.99); 
    } 
);

我試過改變圖像的顯示類型。顯示塊，內嵌塊和內聯。

IE 8的速度如此之慢的任何想法？我的HTML是有效的4.01。

下面是與同樣的問題制定一個傢伙： http://mdasblog.wordpress.com/2009/07/24/jquery-fun-with-animation-and-opacity/

我決定只禁用IE瀏覽器的懸停效果。

if(jQuery.support.opacity) { 
    $(".sectionLink","#divLandingPage").hover(
     function(){ 
      $(this).addClass("hover"); 
      $(this).fadeTo(100,.8); 
    }, 
     function(){ 
      $(this).removeClass("hover"); 
      $(this).fadeTo(100,.99); 
    } 
    ); 
}

來源

2009-12-08 user182666

我不認爲這是解決方案，但你不需要創建一個window.load事件。您在該事件中所做的所有事情都可以在document.ready事件中完成。 – Joel 2009-12-08 20:31:44

側面問題：當所有圖像完成加載後document.load是否激活？看來我只能在使用window.load時才能使用它。 – user182666 2009-12-08 20:34:42

發現差異：http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/感謝您的提示，我將切換到其中一個或另一個 – user182666 2009-12-08 20:42:29

$(".sectionLink img").hover(function(){ 
     $(this).addClass("hover").fadeTo(100,.8); 
    }, function(){ 
     $(this).removeClass("hover").fadeTo(100,.99); 
    });

您可以嘗試附加事件處理程序直接上到圖像，或者如果這並不幫助下，嘗試動畫的方法。一個可能的原因可能是IE不支持opacity作爲css屬性。

你應該鏈接代碼btw。

load（）事件在內容下載和呈現時觸發。 ready（）事件在文檔準備好處理/操作時觸發。

來源

2009-12-08 20:41:50 Sveisvei

感謝您的評論。你是對的，它看起來像一個不透明的問題。我決定在IE中禁用懸停效果。我可能會在未來實現僅CSS的懸停效果。 – user182666 2009-12-08 21:26:46

我發現jQuery的動畫效果在所有版本的IE中都有問題，當一個元素應用了CSS position屬性時。通常在沒有應用position屬性的情況下將元素包裝在div中將解決該問題。更多的信息可以在in jQuery slideToggle and Internet Explorer找到。

來源

2009-12-08 21:43:09 ahsteele

jQuery懸停和淡入效果在IE 8中緩慢

回答

相關問題