jQuery 悬停和淡入淡出效果在 IE 8 中很慢答案

【问题标题】：jQuery hover and fadeTo effect is slow in IE 8jQuery 悬停和淡入淡出效果在 IE 8 中很慢
【发布时间】：2014-08-15 12:30:41
【问题描述】：

我一直在用 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);
    }
    );
}

【问题讨论】：

我不认为这是解决方案，但您不需要创建 window.load 事件。您在该事件中所做的一切都可以在 document.ready 事件中完成。
附带问题：当所有图像完成加载后，document.load 是否会激活？看来我只能在使用 window.load 时才能让它工作。
找到不同之处：4loc.wordpress.com/2009/04/28/documentready-vs-windowload 感谢您的提示，我将切换到其中一个或另一个
IE8 及以下的 JS 性能很差，而且 jQuery 必须做更多的工作才能使不透明度工作。这意味着您的动画最终会变得缓慢而跳跃。不幸的是，没有真正的解决方法

标签： jquery internet-explorer-8 hover fadeto

【解决方案1】：

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

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

顺便说一句，你应该链接代码。

在下载和呈现内容时触发 load() 事件。当文档准备好处理/操作时触发 ready() 事件。

【讨论】：

感谢您的评论。你是对的，它看起来确实是一个不透明的问题。我决定禁用 IE 中的悬停效果。将来我可能会实现仅 CSS 的悬停效果。

【解决方案2】：

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

【讨论】：