Question

这个奇怪的问题。我有一个网页，使用jQuery的fadeIn（）和fadeOut（）方法在计时器上淡入和淡出图像。它在Firefox和Chrome中运行良好，但在IE9中却没有 - 只有第一张图片显示。在大量删除CSS，HTML等之后，为了减少原因，我设法让它在IE9 中运行，但前提是我删除了我的HTML文件的第一行：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

当该行存在时，fadeIn（）失败。没有那一行，fadeIn（）可以工作。无论如何，fadeOut（）似乎都能正常工作。

我正在使用jQuery的最新稳定版本（昨天下载）。

这是HTML文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script src="scripts/jquery.js" type="text/javascript"></script>
        <script src="scripts/imageswitch.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="myGallery">
            <img src="/images/Img1.jpg" id="firstimg" class="active ready" onload="setInterval( 'swapImages()', 3000 );" />
            <img src="/images/Img2.jpg" onload="SetImgReady(this);" />
            <img src="/images/Img3.jpg" onload="SetImgReady(this);" />
        </div>
    </body>
</html>

这是“imageswitch.js”的内容:(我使用SetImgReady（）函数在每个图像下载完成后为每个图像添加'ready'类，因此它只能在完全加载的图像之间旋转）

function swapImages() {
    var $active = $('#myGallery .active');
    var $next = ($('#myGallery .active').next().length > 0) ? $('#myGallery .active').next() : $('#myGallery img:first');

    while ($next && !$next.hasClass('ready')) {
        if ($next.next().length > 0)
            $next = $next.next();
        else
            $next = false;
    }

    if ($next && $active) {
        $next.fadeIn( 2000 ).addClass('active');
        $active.fadeOut( 2000 ).removeClass('active');
    }
}

function SetImgReady( $ImgObj ) {
    if ($ImgObj)
        $ImgObj.className += "ready";
}

这就是CSS：

#myGallery{
    position:relative;
    width:400px;
    height:300px;
}
#myGallery img{
    display:none;
    position:absolute;
    top:0;
    left:0;
    border: 1px solid black;
}
#myGallery img.active{
    display:block;
}

所以...是否声明IE9过于符合标准，并决定在XHTML1.0下不允许淡出？

另一件奇怪的事情也会发生，一旦衰落起作用：仅在第一个图像开关上，显示的图像立即消失而不是淡出。所有其他图像根据需要很好地淡入/淡出。对此也有任何想法？

谢谢大家。

Answer 1

大卫：头部缺少标题不是错误。实际上HTML5让我们跳过整个头部，它是有效的。根据官方的W3C HTML规范，你只需要一个正文部分:)所以我想这是最短的HTML允许：

<html><body><h1>hello world</h1></body></html>

只是不确定是否需要！doctype：）

主题问题是 - 以某种方式转换为CSS并在IE中显示属性，大多数情况来自IE6。如果将“display：none”设置为HTML元素，则由于“display：none”而未显示元素，因此FadeIn没有结果，并且fadeIn不会更改此状态。

我的解决方案是：将CSS类设为“隐藏”并通常设置为“display：none”。这一行JavaScript代码在document.load上发布：

$('.hidden').fadeTo(0,0).css('visibility','visible');

之后fadeIn - 并最终fadeOut :) - 现在应该工作了。如果您仍然遇到任何问题 - 尝试使用fadeTo或不透明度动画效果代替fadeIn / fadeOut。

Answer 2

删除DOCTYPE会使IE进入怪癖模式，您可以通过按F12激活调试控制台然后选择屏幕底部的怪癖模式或兼容模式来实现相同的目的。

虽然我得到了同样奇怪的行为。

由于某些原因，在调试模式下执行代码似乎工作得更好，或者如果将行为附加到按钮，如果单击它就会最终有效。

我认为fadein的行为是错误的，只会在元素的背景中消失而不是前景。 show（）表现出同样奇怪的行为。

在兼容性视图中一切正常，尽管我不喜欢使用它。

Answer 3

如果您使用的是旧版本的jquery，请升级到1.6+版本。在旧版本的IE9中几乎没有问题。我希望这能解决这个问题。

Answer 4

我和1.6.2有同样的问题。对1.6.4的更新解决了它。

jQuery fadeIn不在IE9上工作

4 个答案: