由於絕對div，jquery動畫無法在IE上工作

我在頁面上有一個簡單動畫的問題。目前，我正在顯示5張不透明度爲0的圖片。然後，我使用jQuery庫將它們設置爲幻燈片放映。這在鉻，safari，firefox中工作正常，但是，jquery腳本不適用於IE。由於絕對div，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); 
        }); 
       }); 
      }); 
     }); 
};

感謝您的幫助

來源

2013-02-27 Romain

您可能需要設置「位置：相對的;」在一些元素上。

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

#container_images ul { 
    position: relative; 
} 

body { 
    position: relative; 
}

來源

2013-02-27 20:36:59 teewuane

由於絕對div，jquery動畫無法在IE上工作

回答

相關問題