jQuery hover and fadeTo effect is slow in IE 8

Question

I've been developing my website in both Firefox and IE 8. There's an image hover effect on the main page (as well as in the photography and drawing sections). You can see the code in the source at http://www.dgendill.com. In Firefox, the effect works perfect. In IE 8, it works, but it's much, much slower. Here's what I've tried to improve the speed:

1. Used the optimized jQuery library

2. Narrowed the scope with which jQuery traverses the DOM. For instance:

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

3. I've tried changing the display type of the image. Display block, inline-block, and inline.

Any ideas why IE 8 is so much slower? My HTML is valid 4.01.

Here's a guy that's worked with the same problem: http://mdasblog.wordpress.com/2009/07/24/jquery-fun-with-animation-and-opacity/

I've decided to just disable the hover effect in IE.

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

Answer 1

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

You could try to attach the eventhandler direct on to the image, or if this doesnt help, try the animate method. A possible reason may be that IE doesnt support opacity as a css property.

You should chain the code btw.

The load() event triggers when the content is downloaded and rendered. The ready() event triggers when the document is ready to be worked on/manipulated.

Answer 2

I have found that jQuery's animation effects have issues in all versions of IE when an element has a CSS position attribute applied to it. Typically wrapping the element in a div without a position attribute applied will fix the issue. More information can be found in jQuery slideToggle and Internet Explorer.