jQuery的fadeTo效果是錯誤的IE 8

我不太清楚發生了什麼，我試圖達到的效果是在firefox工作，但不是Internet Explorer 8jQuery的fadeTo效果是錯誤的IE 8

這裏是網頁：http://www.naitsa.ca/aspnet/YearEndShow.aspx

檢查標題（右側）中的頂部3個鏈接，當你將鼠標懸停在它們上方時，其中有聚光燈淡入淡出。

看起來，淡入淡出正在工作，但圖形顯示錯誤。它是一個透明的PNG。

這裏是JQuery的：

$(document).ready(function() { 
    $(".B1").hover(
     function() { 
      $(this).stop(true, true).fadeTo(500, 1.00); 
     }, 
     function() { 
      $(this).stop(true, true).fadeTo(500, 0.00); 
     } 
    ); 

    $(".B2").hover(
     function() { 
      $(this).stop(true, true).fadeTo(500, 1.00); 
     }, 
     function() { 
      $(this).stop(true, true).fadeTo(500, 0.00); 
     } 
    ); 


    $(".B3").hover(
     function() { 
      $(this).stop(true, true).fadeTo(500, 1.00); 
     }, 
     function() { 
      $(this).stop(true, true).fadeTo(500, 0.00); 
     } 
    ); 

});

這裏是CSS：

.B1 { 
    background:Transparent url(App_Themes/BlueGrey/Images/YearEndShow/Buttons-light-and-shadow.png) no-repeat; 
    opacity: 0.0; 
    filter: alpha(opacity = 0); 
} 

.B2 { 
    background:Transparent url(App_Themes/BlueGrey/Images/YearEndShow/Buttons-light-and-shadow.png) no-repeat; 
    opacity: 0.0; 
    filter: alpha(opacity = 0); 
} 

.B3 { 
    background:Transparent url(App_Themes/BlueGrey/Images/YearEndShow/Buttons-light-and-shadow.png) no-repeat; 
    opacity: 0.0; 
    filter: alpha(opacity = 0); 
}

下面是HTML：

<table style="width:600px; position:relative; top:-2px;"> 
    <tr> 
     <td style="background:url(App_Themes/BlueGrey/Images/YearEndShow/buttons-yearendshow-info.png) no-repeat;"><div style="width:200px; height:120px; display:block;" class="B3"><a href="YearEndShow.aspx" style="width:200px; height:120px; display:block;"></a></div></td> 
     <td style="background:url(App_Themes/BlueGrey/Images/YearEndShow/buttons-Artist-Info.png) no-repeat;"><div style="width:200px; height:120px; display:block;" class="B2"><a href="YearEndShowArtists.aspx" style="width:200px; height:120px; display:block;"></a></div></td> 
     <td style="background:url(App_Themes/BlueGrey/Images/YearEndShow/buttons-Event-Info.png) no-repeat;"><div style="width:200px; height:120px; display:block;" class="B1"><a href="YearEndShowInfo.aspx" style="width:200px; height:120px; display:block;"></a></div></td>    
    </tr> 
</table>

任何想法，爲什麼圖形出現如此怪異？

謝謝！

來源

2011-03-15 Mausimo

我過去使用IE8和透明PNG圖像時使用hover()取得了更多的成功。我已經在IE8和Chrome 11中爲我製作了一個演示 - http://jsfiddle.net/Ym8jL/1/

我移動了CSS和HTML，並刪除了重複，以便於演示。

來源

2011-03-15 20:19:02 andyb

我真的很感謝你經歷了所有的麻煩。我將執行這個明天。謝謝 – Mausimo 2011-03-16 04:20:42

我沒有ie8來檢查您遇到的問題，但它聽起來與我最近使用的相似 - 使用自定義淡入/淡出功能檢查此鏈接http://www.kevinleary.net/jquery-fadein-fadeout-problems-in-internet-explorer/。

這一切都做IE的過濾器的問題 - 使用這個插件來創建自定義函數，那麼：

$(".B1").hover(
    function() { 
     $(this).stop(true, true).customFadeIn(); 
    }, 
    function() { 
     $(this).stop(true, true).customFadeOut(); 
    } 
);

應該工作。

來源

2011-03-15 19:41:05 tbwcf

jQuery的fadeTo效果是錯誤的IE 8

回答

相關問題