複数の.animate（）関数がIE9で動作しない（ie6;で動作します）

Question

私はIE9の.animate（）関数には奇妙ですが単純な問題があります。私はIE6でも期待通りに動作するので、奇妙なことを言う。

私は2つの順序付けられていないリストを持っています。誰かが最初のリストの上に居るとき、対応する李は2番目のリストで動く。これはすべての良いブラウザとIE6で正しく動作します。しかし、IE9では、最初の唯一のアニメーションのみ、他の2つはアニメーション化されていません。ここで

マークアップです：ここでは

<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です：IE用

#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%; 
} 

条件付き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のノブですので、私が今問題を見つめているにしてもわかりません。プラグインを使って達成しようとしていることが分かっています。しかし、もし私がそれを使うことができれば、私はずっと前からそうしていたでしょう。どんな助けもありがとう。前もって感謝します。

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> 

また、あなたはこれとほぼ同一のコードのすべての3つのブロックを置き換えることができます。

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/。