jQuery Array Question

Question

私はjQueryの新機能です。ユーザーが要素（#nav li）の上を移動すると、より大きな幅にアニメーションされ、完全な背景イメージ。各メニュー項目には、明示的に幅を設定するIDがあります（サイズがすべて異なるため）。＃nav1は80px、＃nav2は90pxです。だから私はこれを発見した：How to get all of the IDs with jQuery?と私は配列を作成するのに役立ちましたが、今は問題をアニメーションに挿入する方法を考えている。私はeachまたはforループを行う必要があると思った。しかし、私はjQueryの方が新しく、いくつか問題があると言いました。

基本的には、変数chgWidthを現在のホバリング#navの幅（）に戻してから、その変数をアニメーションに挿入したい場合を除いて、例えば30pxを追加するか、 30pxを引く

私はこれは私がやってしまったことですし、それはそうだ回答に基づいて

#menu { width: 100%; overflow: hidden; padding:0px 0px; background: #ffc4a0;} 
#nav { position: relative; left: 50%; float: left;} 
#nav li { position: relative; right: 50%; float: left; padding: 0 5px; margin: 0 5px; overflow:hidden; } 
#nav1 { width:55px; } 
#nav2 { width:80px; } 
#nav3 { width:175px; } 
#nav4 { width:60px; } 
#nav5 { width:85px; } 
#nav6 { width:40px; } 
#nav7 { width:100px; } 
#nav li a { color: #ffffff; text-decoration: none; font: bold 16px Verdana, Arial, Helvetica, sans-serif; } 

：ここに私の現在のコードは、サンプルのHTML

<div id="menu"> 
    <ul id="nav"> 
     <li id="nav1"><a alt="" href="#">home</a></li> 
     <li id="nav2"><a alt="" href="#">about us</a></li> 
     <li id="nav3"><a alt="" href="#">weddings & events</a></li> 
     <li id="nav4"><a alt="" href="#">gallery</a></li> 
     <li id="nav5"><a alt="" href="#">accolades</a></li> 
     <li id="nav6"><a alt="" href="#">blog</a></li> 
     <li id="nav7"><a alt="" href="#">contact us</a></li> 
    </ul> 
</div> 

サンプルCSSは...

$(function(){ 
var chgWidth = $("#nav [id]").map(function(id) { 
     return this.id; 
     }); 

     $.each(chgWidth,function(n,value){ 
     $('#nav li').hover(function() { 
      $(this).stop(0,1).animate({"width" : chgWidth+"px" }); 
     }, 
     function(){ 
      $(this).stop(0,1).animate({ "width" : chgWidth+"px" }); 
     }); 

}); 

です良い（ジョエルとkrdluzniのおかげで）：

$(function(){ 
    $("#nav [id]").each(function(){ 
     $(this).hover(function() { 
      $(this).stop(0,1).animate({"width" : "+=30" }); 
     }, 
     function(){ 
      $(this).stop(0,1).animate({ "width" : "-=30" }); 
     }); 
    }); 
}); 

Answer 1

IDのあるnavの各要素にアニメーションを割り当てる必要があるほど、実際に配列内のIDを取得する必要はありません。

idsをchgWidth変数にマッピングする代わりに、それぞれを使用して要素のコレクションを反復処理し、それぞれを個別に設定します。

$(function(){ 
    $("#nav [id]").each(function(){ 
     $(this).hover(function() { 
      $(this).stop(0,1).animate({"width" : this.id+"px" }); 
     }, 
     function(){ 
      $(this).stop(0,1).animate({ "width" : this.id+"px" }); 
     }); 
    }); 
}); 

あなたは要素のコレクションを反復処理するためにeachを使用する場合、thisコンテキストが現在の反復要素に設定されています。

Answer 2

jQueryは少し前から、アニメーションの幅やその他の数値の+ =のような構文を受け入れています。概要の2番目の最後の段落（および例も参照）：http://docs.jquery.com/Effects/animate#paramsdurationeasingcallback

Answer 3

各機能は必要ありません。セレクタが複数の要素を返す場合、すべての要素のは、それらに連鎖した関数を受け取ります。

これはほとんどの権利である：

$("li #nav").hover(
    function() 
    { 
     $(this).stop(0,1).animate({"width" : this.width()+30 }); 
     //save original width somehow 
    }, 
    function() 
    { 
     $(this).stop(0,1).animate({ "width" : this.width()-30 }); 
     //retrieve original width 
    }); 
); 

はあなただけ何とか幅を保存する必要があります。おそらくそれらはCSSから読み込むことができます。