javascript - jQuery 数组问题

Question

我是 jQuery 的新手，我正在尝试制作一个很酷的小菜单效果，当用户将鼠标悬停在一个元素 (#nav li) 上时，它会动画到更大的宽度，这将显示完整的背景图像.每个菜单项都有一个 ID 来明确设置宽度(因为它们的大小都不同)，所以 #nav1 可能是 80px 而 #nav2 是 90px。所以我发现了这个:How to get all of the IDs with jQuery?这帮助我创建了一个数组，但现在我在弄清楚如何将它插入到动画中时遇到了问题。我想我需要做一个 each 或 for 循环。但就像我说的那样，我对 jQuery 很陌生，遇到了一些问题。

所以基本上我希望变量 chgWidth 返回当前悬停的 #nav 的 width() ，然后我将该变量插入到动画中，除了我会添加 30px 例如，或者在悬停时我会减去30 像素。

有什么想法吗？这是我当前的代码...

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

});

示例 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:

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

根据我得到的答案，这就是我最终所做的，它似乎运作良好(感谢 Joel 和 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

jQuery 不久前接受了类似 += 的语法来表示动画中的宽度和其他数值。请在此处查看概述中的倒数第二段(以及示例):http://docs.jquery.com/Effects/animate#paramsdurationeasingcallback