jQuery悬停和fadeTo效果在IE 8中很慢

发布于 2024-08-13 17:36:17 字数 1180 浏览 14 评论 0原文

我一直在 Firefox 和 IE 8 中开发我的网站。主页上（以及摄影和绘图部分）有图像悬停效果。您可以在 http://www.dgendill.com 中查看源代码。在 Firefox 中，效果非常完美。在 IE 8 中，它可以工作，但速度要慢得多。以下是我尝试提高速度的方法：

使用优化的 jQuery 库

缩小 jQuery 遍历 DOM 的范围。例如：

$(".sectionLink","#divLandingPage").hover(
    功能（）{
        $(this).addClass("悬停");
        $(this).fadeTo(100,.8);
    },
    功能（）{
        $(this).removeClass("悬停");
        $(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);
    }
    );
}

原文

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:

Used the optimized jQuery library

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);
    }
);

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);
    }
    );
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

小嗷兮 2024-08-20 17:36:17

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

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

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

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

    $(".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.

回复收藏 0 原文

爱的故事 2024-08-20 17:36:17

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

回复收藏 0 原文

~没有更多了~