0

ページ上の単純なアニメーションに問題があります。現在、不透明度: 0 の画像を 5 枚表示しています。次に、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

「position:relative;」を設定する必要がある場合があります。いくつかの要素について。

#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 に答える