jQuery fadeIn not working on IE9
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 r开发者_如何学运维emove 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.
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.
Removing the DOCTYPE puts IE into quirks mode, you can achieve the same thing by pressing F12 to activate the debug console and then selecting quirks mode or compatibility mode on the bottom of the screen.
I am getting the same weird behaviour though.
It seems to work better by executing the code in debug mode for some reason, or if you attach the behaviour to a button, it will eventually work if you click it enough.
i think the fadein behaviour is buggy, and only fades in the background of the element and not the foreground. show() exhibits the same weird behaviour.
Everything works fine in compatibility view, as much as I dislike using it.
I had the same issue with 1.6.2. An update to 1.6.4 solved it.
If you are using older version of jquery please upgrade to 1.6+ versions. There were fews issues in IE9 with older versions. I hope this will fix the problem.
加载中,请稍侯......
精彩评论