Question

这真让我疯狂。

我通过滚动和悬停制作了导航淡出菜单。但它显示透明背景png文件和文本在IE8及更低版本中失真。

我找不到好的解决方案。 :( 请帮帮我!!!

这是我的脚本代码。

<script type="text/javascript" src="/web/upload/js/jquery-1.8.0.min.js">

$(function() {
    $(window).scroll(function(){
        var scrollTop = $(window).scrollTop();
        if(scrollTop != 0)
            $('#header').stop().animate({'opacity':'0'},300);
        else    
                $('#header').stop().animate({'opacity':'1'},300);
    });

    $('#header').hover(
        function (e) {
            var scrollTop = $(window).scrollTop();
            if(scrollTop != 0){
                $('#header').stop().animate({'opacity':'1'},300);
            }
        },
        function (e) {
            var scrollTop = $(window).scrollTop();
            if(scrollTop != 0){
                $('#header').stop().animate({'opacity':'0'},300);
            }
        }
    );
});

</script>

Answer 1

我想过发表评论，但我觉得这需要一个“答案”。

查看你的代码，我可以看到你为每个滚动动作执行代码如$（window）和$（'＃header'）。这是非常昂贵的，可能会影响IE8的表现。另外，这段代码

$('#header').stop().animate({'opacity': '0'}, 300);

当用户从顶部滚动时，

将反复执行，这可能不是一个平滑的效果。我将从重新编码您的滚动功能开始，然后从那里开始。尝试这样的事情（未经测试的......）：

(function(window) {
    // Store your objects in vars outside of the scroll function
    var $header = $('#header'),            
        $window = $(window),
        headerVisible = true,
        fadeHeight = parseInt($header.outerHeight() / 2);

    $window.scroll(function(){
        var scrollTop = $window.scrollTop();

        if (scrollTop > fadeHeight && headerVisible) {
            headerVisible = false;
            $header.stop().animate({'opacity': '0'}, 300);
        } else if (scrollTop < fadeHeight && !headerVisible) {
            headerVisible = true;
            $header.stop().animate({'opacity': '1'}, 300);
        }
    });

    // Add your hover code here...and reuse the variables for $window and $header

// Pass in the 'global' window so we get faster access to a local-scope version
})(window);

ie8动画jquery问题

1 个答案: