jQuery Array Question
<p>I'm rather new to jQuery and I'm trying to make a cool little menu effect where when the user hovers over a element (#nav li) it will animate to a larger width, which will reveal the full background image. Each of the menu items has a ID to explicitly set a width (since they are all different in size), so #nav1 might be 80px whereas #nav2 is 90px. So I found this: <a href="http://stackoverflow.com/questions/827294/how-to-get-all-of-the-ids-with-jquery">http://stackoverflow.com/questions/827294/how-to-get-all-of-the-ids-with-jquery</a> and that helped me to create a array but now I'm having problem figuring out how to insert it into the animation. I figured I would need to do a each or for loop. But like I said I'm rather new to jQuery and am having some problems.</p>

<p>So basically I'd like the variable chgWidth to return the width() of the currently hovered #nav and then I would plug that variable into the animate except I would add 30px for instance, or on the hover off I would subtract 30px.</p>

<p>Any idea? Here is my current code...</p>

<pre><code>$(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" });
        });

});
</code></pre>

<p>Sample HTML</p>

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

<p>Sample CSS:</p>

<pre><code>#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; }
</code></pre>

<p>Based on the answer I got this is what I ended up doing and it seems to work good (Thanks to Joel and krdluzni):</p>

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