Jquery - 框在 IE8 及以下版本中不设置动画答案

【问题标题】：Jquery - boxes do not animate in IE8 and BelowJquery - 框在 IE8 及以下版本中不设置动画
【发布时间】：2011-11-28 13:13:13
【问题描述】：

我最近在我的网站中加入了 jQuery 来为两个框设置动画，具体取决于用户滚动页面的距离。

它们都出现在页面顶部，因此在页面最初加载时不可见（负边距顶部数字）。

代码如下，但你也可以看到JSFiddle of it here。

JavaScript

$(document).ready(function() {
    var away = false;

    $(document).scroll(function() {
        if ($(document).scrollTop() > 150) {
            if (!away) {
                away = true;
                $('#red-box').stop().animate({
                    'margin-top': '0px'
                }, 500);
            }
        } else {
            away = false;
            $('#red-box').stop().animate({
                'margin-top': '-30px'
            }, 150);
        }
    });
});

$(document).ready(function() {
    var away = false;

    $(document).scroll(function() {
        if ($(document).scrollTop() > 250) {
            if (!away) {
                away = true;
                $('#blue-box').stop().animate({
                    'margin-top': '30px'
                }, 500);
            }
        } else {
            away = false;
            $('#blue-box').stop().animate({
                'margin-top': '-200px'
            }, 150);
        }
    });
});

HTML

<div id="red-box"></div>
<div id="blue-box"></div>

CSS

body {
    height:2000px;
}

#red-box {
    position:fixed;
    width:100%;
    height:30px;
    margin-top:-30px;
    background-color:red;
    z-index:2;
}

#blue-box {
    position:fixed;
    width:150px;
    height:200px;
    margin-left:60px;
    margin-top:-200px;
    background-color:blue;
    z-index:1;
}

这似乎在所有浏览器的所有最新版本上都运行良好，但在 IE8 及更低版本上根本不起作用（这并不奇怪）。当用户滚动时，这些框不会动画，因此永远不会出现在屏幕上。

谁能帮我让它在 IE8 上运行？甚至可能是 IE7？

【问题讨论】：

你能确保在你的问题中包含相关代码，以及链接到 JsFiddle 吗？问题应该独立于其他资源。特别是 @JsFiddle 的人们很难长时间保持这种状态......
抱歉，我以后一定会这样做的。感谢您的建议。

标签： jquery internet-explorer-8 scroll jquery-animate scrolltop

【解决方案1】：

实际上，这是因为愚蠢的 IE 在 document 对象上没有滚动功能，而是在 window 对象上具有滚动功能。

这里是更新后的 js 函数，适用于 IE 和其他（虽然没有优化）

    $(document).ready(function() {
    var away = false;

    $(document).scroll(function() {
        if ($(document).scrollTop() > 150) {
            if (!away) {
                away = true;
                $('#red-box').stop().animate({
                    'margin-top': '0px'
                }, 500);
            }
        } else {
            away = false;
            $('#red-box').stop().animate({
                'margin-top': '-30px'
            }, 150);
        }
    });
});


$(document).ready(function() {
    var away = false;

    $(document).scroll(function() {
        if ($(document).scrollTop() > 250) {
            if (!away) {
                away = true;
                $('#blue-box').stop().animate({
                    'margin-top': '30px'
                }, 500);
            }
        } else {
            away = false;
            $('#blue-box').stop().animate({
                'margin-top': '-200px'
            }, 150);
        }
    });
});

if ($.browser.msie){
$(document).ready(function() {
    var away = false;

    $(window).scroll(function() {
        if ($(document).scrollTop() > 150) {
            if (!away) {
                away = true;
                $('#red-box').stop().animate({
                    'margin-top': '0px'
                }, 500);
            }
        } else {
            away = false;
            $('#red-box').stop().animate({
                'margin-top': '-30px'
            }, 150);
        }
    });
});


$(document).ready(function() {
    var away = false;

    $(window).scroll(function() {
        if ($(document).scrollTop() > 250) {
            if (!away) {
                away = true;
                $('#blue-box').stop().animate({
                    'margin-top': '30px'
                }, 500);
            }
        } else {
            away = false;
            $('#blue-box').stop().animate({
                'margin-top': '-200px'
            }, 150);
        }
    });
  });
}

这里是link to updated jsfiddle。

【讨论】：