Question

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

所以基本上我希望变量chgWidth返回当前悬停的#nav的width（），然后我会将该变量插入到animate中，除非我会添加30px，或者在悬停时我会减去30PX。

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

$(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

Answer 2

您实际上不需要在数组中获取ID，因为您需要为具有id的导航中的每个元素分配动画。

不是将id映射到chgWidth变量，而是使用each来迭代元素集合并单独设置每个元素。

$(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 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中读取它们。

jQuery数组问题

3 个答案: