【发布时间】：2011-08-05 15:41:00
【问题描述】：
这个问题很奇怪。我有一个网页可以在计时器上淡入淡出图像，使用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() 函数在每个图像完成下载后为其添加“就绪”类，因此它只会在完全加载的图像之间旋转）
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 或其他什么情况下不允许淡入淡出？
另外一件奇怪的事情也发生了，一旦淡入淡出工作：仅在第一个图像开关上，显示的图像立即消失而不是淡出。所有其他图像都可以根据需要很好地淡入/淡出。对此也有什么想法吗？
谢谢大家。
【问题讨论】：
标签： jquery internet-explorer-9