jQuery fadeTo effect is wrong in IE 8

I'm not quite sure what is happening, the effect i am trying to accomplish is working in firefox but not Internet Explorer 8.

Here is the webpage: http://www.naitsa.ca/aspnet/YearEndShow.aspx

Check the top 3 links in the header (right side) that have spot lights fade in and out when you hover overtop of them.

It appears that the fade is working but the graphic shows up wrong. It is a transparent png.

Here is the 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);
        }
    );

});

Here is the CSS:

.B1 {
    background:Transparent url(App_Themes/BlueGrey/Images/YearEndShow/Buttons-light开发者_如何学Go-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);
}

Here is the 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>

Any ideas why the graphic comes up so weird?

thanks!

I don't have ie8 to check the issue you're having but it sounds similar to one I had recently - check this link out http://www.kevinleary.net/jquery-fadein-fadeout-problems-in-internet-explorer/ with the custom fadeIn/Out function.

It's all to do with ie's filter problems - using this plugin to create your custom function then:

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

Should work.

I have had more success using hover() in the past with IE8 and transparent PNG images. I've made a demo that is working for me in IE8 and Chrome 11 - http://jsfiddle.net/Ym8jL/1/

I moved your CSS and HTML around and removed the duplication to make it easier to demonstrate.