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.
I had the same issue with 1.6.2. An update to 1.6.4 solved it.