jQuery fadeIn 不适用于 IE9

发布于 2024-11-28 06:31:19 字数 2431 浏览 1 评论 0原文

奇怪的问题这个。我有一个网页，可以使用 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 或其他情况下不允许淡入淡出？

一旦淡入淡出起作用，还会发生另一个奇怪的事情：仅在第一个图像切换时，显示的图像立即消失而不是淡出。所有其他图像都可以根据需要很好地淡入/淡出。对此也有什么想法吗？

谢谢大家。

原文

Weird problem this. I've got a web page that fades images in and out on a timer, using jQuery's fadeIn() and fadeOut() methods. It worked fine in Firefox and Chrome, but not in IE9 - only the first image ever showed. After a lot of removing CSS, HTML, etc, to whittle down the reason, I managed to get it working in IE9 but only if I remove the first line of my HTML file:

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

With that line present, fadeIn() fails. Without that line, fadeIn() works. fadeOut() appears to work regardless.

I'm using the latest stable build of jQuery (downloaded yesterday).

This is the HTML file:

<!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>

This is the contents of "imageswitch.js": (I use the SetImgReady() function to add the 'ready' class to each image once it's finished downloading, so it only ever rotates between fully loaded images)

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

And this is the 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;
}

So... is the declaration making IE9 go overly-standards-compliant and decide that fading isn't allowed under XHTML1.0 or something?

Another odd thing that also happens, once the fading is working: On only the first image switch, the displayed image dissapears immediately instead of fading out. All other images nicely fade in/out as required. Any thoughts on that too?

Thanks all.

分享到QQ

分享到微博

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

发布评论

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

小…红帽 2024-12-05 06:31:19

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

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

只是不确定是否需要 !doctype:)

主题问题是 - 某种程度上与 IE 中的 CSS 和显示属性有关，大多数情况来自IE6。如果将“display:none”设置为 HTML 元素，则不会得到 FadeIn 的结果，因为元素因“display:none”而未显示，并且 fadeIn 不会更改此状态。

我的解决方案是：像往常一样创建一个CSS类“隐藏”并设置为“display：none”。这行 JavaScript 代码在 document.load 上触发：

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

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

David: missing title in the head is NOT an error. In fact HTML5 let's skip whole head section and it is valid. According to official W3C HTML specification you only need to have a body section :) so i guess this is shortest HTML allowed:

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

just not sure about need of !doctype :)

the topic problem is - somehow releated to CSS and display property in IE, most cases from IE6. If you set "display:none" to an HTML element, you get no results with FadeIn as element is not displayed because of "display:none", and fadeIn does not change this state.

my solution is: make a CSS class "hidden" and set as "display:none" as usually. And this line of JavaScript code fired on document.load:

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

after that fadeIn - and eventually fadeOut :) - shoud be working now. If you still get any issues - try to use fadeTo or opacity animation effect in place of fadeIn/fadeOut.

回复收藏 0 原文