我确实对页面上的简单动画有疑问。目前，我正在显示 5 张不透明度为 0 的图片。然后，我使用 jQuery 库将它们制作成幻灯片动画。这在 chrome、safari、firefox 中工作正常，但是 jquery 脚本在 IE 上不工作。
经过一些研究，我发现我的容器“container_images”的“绝对”位置破坏了 jQuery 动画，但我真的不知道如何修复它...... 有人知道如何解决吗？ 这是我的代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta charset="UTF-8" />
<title>Embargo films</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen"/>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<!-- resize the height of the picture gallery -->
<script type="text/javascript" src="js/gallery.js"></script>
</head>
<body>
<div id="container" style=" width: auto !important; ">;
<div id="menu">
<ul>
<li id="contact"><a href="contact.php">CONTACT</a></li>";
</ul>
</div>
<div id="clear"></div>
<div id="loading_gif"><img src="images/load_dark.gif" alt="gif" style="width: 16px;height: 16px;display: block;margin-left: auto;margin-right: auto;margin-top: 320px;" /></div>
</div><!-- container -->
<div id="container_images">
<ul>
<li id="1"><img src="images/desktop/StillLife_Desktop.jpg" alt="An awesome image" /></li>
<li id="2"><img src="images/desktop/iAnna_Desktop.jpg" alt="An awesome image" /></li>
<li id="3"><img src="images/desktop/Sweeney_Desktop.jpg" alt="An awesome image" /></li>
<li id="blue_background"><img src="images/desktop/Background_Desktop.jpg" alt="An awesome image" /></li>
<li id="embargo_films"><img src="images/desktop/EF_Logo_Desktop.png" alt="An awesome image" /></li>
</ul>
</div><!-- container_images -->
</style>
</body>
</html>
我的CSS:
html {
background-color: #252526;
}
#menu{
display: block;
}
#menu ul {
float: right;
width: 50%;
margin-bottom: 5px;
font-family: DINMedium;
}
#menu ul li{
float: right;
width: 60px;
text-align: right;
font-size: 16px;
}
#menu ul li#contact{
margin-right: 30px;
opacity:0;
}
#menu ul li#contact{
width: 100%;
}
#menu ul li a{
font-family:DINMedium;
text-decoration: none;
color:#7A7A7A;
}
#menu ul li a:hover{
color:#FFFFFF;
}
#clear {
clear:both;
}
#container_images li{
z-index: 1;
opacity:0;
}
#container_images li#blue_background {
z-index: 2;
}
#container_images li#embargo_films {
z-index: 3;
}
#container_images li {
opacity:0;
}
#container_images {
position:fixed;
top:-50%;
left:-50%;
width:200%;
height:200%;
}
#container {
z-index: 4;
position: relative;
width: 100%;
padding-top: 5px;
}
#container_images li img {
/* position:absolute;
display: inline;*/
position:absolute;
top:0px;
left:0;
right:0;
bottom:0;
margin:auto;
min-width:50%;
min-height:50%;
}
#container_images li#embargo_films img {
z-index: 3;
}
我的 gallery.js 文件:
$('#loading_gif').show();
// loading a waiting gif until pictures has been loaded
window.onload = function() {
// initialize site
$(document).ready(function()
{
// undisplay the gif
$('#loading_gif').hide();
$('#container_images li#blue_background').animate({opacity: '1'}, 6000);
$('#container_images li#embargo_films').animate({opacity: '0.85'}, 6000);
$('#container_images li#1').animate({opacity: '1'}, 1000, function() {
$('#container_images li#1').animate({opacity: '0'}, 1000);
$('#container_images li#2').animate({opacity: '1'}, 1000, function() {
$('#container_images li#2').animate({opacity: '0'}, 1000);
$('#container_images li#3').animate({opacity: '1'}, 1000, function() {
$('#container_images li#3').animate({opacity: '0'}, 3000, function() {
$('#menu ul li#contact').animate({opacity: '1'}, 1000);
});
});
});
});
};
感谢帮助
最佳答案
您可能需要设置“position:relative;”关于几个要素。
#container_images {
position: relative;
}
#container_images ul li img {
position: relative;
}
#container_images ul {
position: relative;
}
body {
position: relative;
}
关于由于绝对 div，Jquery 动画无法在 IE 上运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15120790/