0

我确实对页面上的简单动画有疑问。目前，我正在显示 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);
                    }); 
                 }); 
             }); 
         }); 
};

感谢您的帮助

4

1 回答 1

0

您可能需要设置“位置：相对；” 关于几个元素。

#container_images {
  position: relative;
}    
#container_images ul li img {
  position: relative;
}

#container_images ul {
  position: relative;
}

body {
  position: relative;
}
于 2013-02-27T20:36:59.657 回答