Jquery动画不是'；因为一个绝对的div，我不能在IE上工作_Jquery_Css

Jquery动画不是'；因为一个绝对的div，我不能在IE上工作

jquery css

Jquery动画不是'；因为一个绝对的div，我不能在IE上工作,jquery,css,Jquery,Css,我确实对页面上的简单动画有问题。目前，我正在显示5张不透明度为0的图片。然后，我使用jQuery库将它们制作成幻灯片。这在chrome、safari、firefox中运行良好，但是jquery脚本在IE上不起作用经过一些研究，我发现我的容器“container_images”的“绝对”位置破坏了jQuery动画，但我真的不知道如何修复它。。。有人知道怎么修吗？这是我的密码： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http

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

my 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);
                    }); 
                 }); 
             }); 
         }); 
};

感谢您的帮助

您可能需要在一些元素上设置“位置：相对”

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

#container_images ul {
  position: relative;
}

body {
  position: relative;
}

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

#container_images ul {
  position: relative;
}

body {
  position: relative;
}