jQuery를 fadeTo 효과 내가 무슨 일이 일어나고 있는지 아주 확실하지 않다 IE 8

Question

잘못이다, 내가 달성하기 위해 노력하고 효과가 파이어 폭스에서 일하고 있지만 Internet Explorer가 여기에

8. 웹 페이지입니다 : http://www.naitsa.ca/aspnet/YearEndShow.aspx

머리글 (오른쪽)에서 스포트라이트가 겹쳐서 표시 될 때 위쪽에있는 3 개의 링크를 확인하십시오.

페이드가 작동하지만 그래픽이 잘못 표시되는 것처럼 보입니다. 그것은 투명한 png입니다.

<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> 

어떤 아이디어가 왜 그래픽이 이상한 온다 :

여기

.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입니다 :

여기

$(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입니다 : 여기

은 JQuery와 무엇입니까?

감사합니다.

Answer 1

IE8 및 투명 PNG 이미지를 사용하여 과거에 hover()을 사용하여 더 많은 성공을 거두었습니다. IE8 및 Chrome 11에서 나를 위해 작동하는 데모를 만들었습니다. - http://jsfiddle.net/Ym8jL/1/

CSS와 HTML을 옮기고 복제를 제거하여 쉽게 보여줄 수 있도록했습니다.

Answer 2

내가 가지고있는 문제를 확인하기 위해 ie8을 가지고 있지 않지만 내가 최근에 가지고있는 것과 비슷한 소리가납니다 -이 링크를 사용자 정의 페이드 인/아웃 기능으로 http://www.kevinleary.net/jquery-fadein-fadeout-problems-in-internet-explorer/에 체크 아웃하십시오.

그것은 즉의 필터 문제와 함께 할 모든입니다 - 다음 사용자 정의 함수를 만들려면이 플러그인을 사용하여 :

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

작동합니다.