Question

我有这个清单项目：

    <ul id="right-menu">
        <li><a href="#">test1</a></li>
        <li><a href="#">test2</a></li>
        <li><a href="#">test3</a></li>
        <li><a href="#">test4</a></li>
    </ul>

有这些风格：

#right-menu {
z-index: 0;
position: relative;
margin-top: 50px;
margin-left: 0;
float: right;
width: 185px;
}
#right-menu li {
width: 200px;
height: 54px;
background-image: url(../menu-fullbg.png);
background-repeat: repeat-x;
margin: 5px 0px 5px 0px;
color: #fff;
right: -200px;
position: relative;
list-style: none;
padding: 5px;
}

和这个JQuery代码：

 $(window).load(function() {
      $("#right-menu li:nth-child(0)").animate({ right: "-100px" }, 500);
      $("#right-menu li:nth-child(1)").animate({ right: "-100px" }, 1000);
      $("#right-menu li:nth-child(2)").animate({ right: "-100px" }, 1300);
      $("#right-menu li:nth-child(3)").animate({ right: "-100px" }, 1600);
      $("#right-menu li:nth-child(4)").animate({ right: "-100px" }, 2000);
      $("#right-menu li:nth-child(5)").animate({ right: "-100px" }, 2500);
});

并且我希望在页面加载一个接一个的时候为它们设置动画，但是使用此代码时，最后一个项目不会显示，并且当我用此替换最后一行代码时：

$("#right-menu li:last-child").animate({ right: "-100px" }, 2500);

之前的li项目消失了!!! 这里的问题是什么？我不明白。什么是正确有效的方法？请帮忙......

Answer 1

nth-child与基于1的CSS选择器一样，基于1：http://api.jquery.com/nth-child-selector/

 $(window).load(function() {
      $("#right-menu li:nth-child(1)").animate({ right: "-100px" }, 500);
      $("#right-menu li:nth-child(2)").animate({ right: "-100px" }, 1000);
      $("#right-menu li:nth-child(3)").animate({ right: "-100px" }, 1300);
      $("#right-menu li:nth-child(4)").animate({ right: "-100px" }, 1600);
      $("#right-menu li:nth-child(5)").animate({ right: "-100px" }, 2000);
      $("#right-menu li:nth-child(6)").animate({ right: "-100px" }, 2500);
});

有点遗憾他们引入了这种不一致，只是为了避免与CSS选择器发生冲突。

:eq()等其他选择器基于0，例如：

$("#right-menu li:eq(0)").animate({ right: "-100px" }, 500);

您可以使用each循环减少代码，根据顺序索引计算持续时间（在本例中为0）：

JSFiddle：http://jsfiddle.net/TrueBlueAussie/LS8MG/1/

$("#right-menu li").each(function(index){
    $(this).animate({ right: "-100px" }, index * 500 + 500);
});

更新

您应该使用文档就绪的快捷版本而不是window.load()：

$(function() {
     // your code here
});

如果你需要避免$命名冲突，这个相当酷的变化：

jQuery(function($) {
     // your code using a local $
});

$(function(){ your code here });是$(document).ready(function(){ your code here });

的快捷方式

使用JQuery逐个动画列表项

1 个答案: