Странная проблема это. У меня есть веб-страница, которая затеняет изображения по таймеру, используя методы 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 или чем-то еще?
Еще одна странная вещь, которая также происходит, когда работает затухание: только при первом переключении изображения отображаемое изображение сразу исчезает, а не исчезает. Все другие изображения красиво исчезают / исчезают по мере необходимости. Есть мысли по этому поводу?
Спасибо всем.