多个.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/。