Question

我一直在Firefox和IE 8中开发我的网站。在主页面（以及摄影和绘图部分）中有一个图像悬停效果。您可以在http://www.dgendill.com看到源代码。在Firefox中，效果非常完美。在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);
    }
    );
}

Answer 1

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

您可以尝试将eventhandler直接附加到图像上，或者如果这没有帮助，请尝试使用animate方法。可能的原因可能是IE不支持opacity作为css属性。

你应该链接代码btw。

下载和呈现内容时会触发load（）事件。当文档准备好进行处理/操作时，就会触发ready（）事件。

Answer 2

我发现当一个元素应用了CSS position属性时，jQuery的动画效果在IE的所有版本中都存在问题。通常将元素包装在没有应用position属性的div中将解决问题。可以找到更多信息in jQuery slideToggle and Internet Explorer。

IE 8中的jQuery hover和fadeTo效果很慢

2 个答案: