多個.animate（）函數不能在IE9中工作（在ie6中工作）

Question

我有一個奇怪的但簡單的問題，IE9中的.animate（）函數。我說很奇怪，因爲即使在IE6中它也能按預期工作。

我有兩個無序列表。當第一個列表中的某人懸停在某個li上時，第二個列表中的相應li動畫。這適用於所有良好的瀏覽器和IE6。但在IE9中只有第一個動畫，另外兩個不是動畫。

下面是標記：

<ul id="nav"> 
     <li id="nav_one"><h1>NAV ONE<h1><p>This animates in IE9</p></li> 
     <li id="nav_two"><h1>NAV TWO<h1><p>This does not animate in IE9</p></li> 
     <li id="nav_three"><h1>NAV THREE<h1><p>This does not animate in IE9</p></li> 
    </ul> 
    <ul id="nav_wrapper"> 
     <li id="nav_wrapper_one"><h1>&nbsp;<h1><p>&nbsp;</p></li> 
     <li id="nav_wrapper_two"><h1>&nbsp;<h1><p>&nbsp;</p></li> 
     <li id="nav_wrapper_three"><h1>&nbsp;<h1><p>&nbsp;</p></li> 
    </ul> 

這裏是CSS：

#nav{ 
    color: #fff; 
    font-family: 'Open Sans Condensed', Arial, sans-serif; 
    margin: 2% 2%; 
    position:absolute; 
    top:0px; 
    z-index: 3; 
} 
#nav h1{ 
    font-size:42px; 
} 
#nav p{ 
    font-size:16px; 
} 
#nav_wrapper{ 
    color: #fff; 
    font-family: 'Open Sans Condensed', Arial, sans-serif; 
    margin: 2% 2%; 
    position:absolute; 
    top:0px; 
    width:100%; 
    z-index: 2; 
} 
#nav_wrapper h1{ 
    font-size:42px; 
} 
#nav_wrapper p{ 
    font-size:16px; 
} 
#nav_wrapper li{ 
    background: rgb(200, 200, 200); 
    background: rgba(200, 200, 200, 0.6); 
    overflow:hidden; 
    width:0%; 
} 

爲IE條件CSS：

#nav_wrapper li{ 
    background:none; 
    /* For IE 5.5 - 9*/ 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#60c8c8c8, endColorstr=#60c8c8c8); 
    /* For IE 8*/ 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#60c8c8c8, endColorstr=#60c8c8c8)"; 
    zoom: 1; 
} 

最後jQuery的：

$("#nav_one").hover(
function(){ $("#nav_wrapper_one").stop().animate({width: '96%'}, 300); }, 
function(){ $("#nav_wrapper_one").stop().animate({width: '0%'}, 300); } 
); 
$("#nav_two").hover(
function(){ $("#nav_wrapper_two").stop().animate({width: '96%'}, 300); }, 
function(){ $("#nav_wrapper_two").stop().animate({width: '0%'}, 300); } 
); 
$("#nav_three").hover(
function(){ $("#nav_wrapper_three").stop().animate({width: '96%'}, 300); }, 
function(){ $("#nav_wrapper_three").stop().animate({width: '0%'}, 300); } 
); 

請請幫助！我正在試圖解決這個問題。但是，嘿，我只是jQuery的noob，所以即使我現在正在盯着這個問題，我也不會意識到它。我知道我想通過插件來實現。但是如果我能使用它，我很早以前就會這樣做了。任何幫助將不勝感激。提前致謝。

Answer 1

修復您的關閉</h1>標籤。你有他們作爲<h1>。結束標籤應該是</h1>。

<ul id="nav"> 
    <li id="nav_one"><h1>NAV ONE</h1><p>This animates in IE9</p></li> 
    <li id="nav_two"><h1>NAV TWO</h1><p>This does not animate in IE9</p></li> 
    <li id="nav_three"><h1>NAV THREE</h1><p>This does not animate in IE9</p></li> 
</ul> 
<ul id="nav_wrapper"> 
    <li id="nav_wrapper_one"><h1>&nbsp;</h1><p>&nbsp;</p></li> 
    <li id="nav_wrapper_two"><h1>&nbsp;</h1><p>&nbsp;</p></li> 
    <li id="nav_wrapper_three"><h1>&nbsp;</h1><p>&nbsp;</p></li> 
</ul> 

而且，你可以用這個替代的幾乎相同的代碼的所有三個大塊：

function makeWrapper(el) { 
    return $("#" + el.id.replace(/_/, "_wrapper_")); 
} 

$("#nav li").hover(
    function(){makeWrapper(this).stop().animate({width: '96%'}, 300); }, 
    function(){makeWrapper(this).stop().animate({width: '0%'}, 300); } 
); 

這是非常可取的，以避免重複的代碼儘可能。你可以看到它在這裏工作：http://jsfiddle.net/jfriend00/v5dmn/。