依次按ID显示LI

Question

我正在创建一个调用javascript效果的for循环并将其应用于LI，按顺序执行。这就是我所拥有的：

$(document).ready(function () {
    for(i=1;i<=10;i++) {
        $("li#"+i).show();
    }
});

然而，这不起作用。我需要它将效果应用于LI＃1然后LI＃2，LI＃3 ......依此类推。

我想要做的是类似于Twitter点击<！>“更多<！>”时所做的事情。页面底部的按钮而不是跳跃我想让它缓和下来。

编辑：我不能将LI包装在DIV中，因为我要将LI添加到UL元素中。

但是，如果有一种方法可以为UL设置动画，因为它会改变尺寸，我会为此做好准备。

Answer 1

$(document).ready(function () {
    for(i=1;i<=10;i++) {
        $("li#"+i).show("slow");
    }
});

查看 show（speed，[callback]）。来自doc：

  

使用a显示所有匹配的元素   优雅的动画和射击   完成后可选回调。

     

每个的高度，宽度和不透明度   匹配元素的更改   根据指定动态   速度。

此外，还有其他隐藏和显示元素的方法，例如淡入淡出和< a href =“http://docs.jquery.com/Effects/fadeOut”rel =“nofollow noreferrer”> fadeOut 。请查看 http://docs.jquery.com/Effects 。

我用静态数据快速模拟了你所追求的东西：

var $lis = $('<li>blha blhahah lajlkdj</li><li>blha blhahah lsdfsajlkdj</li>').hide();
$('ul').append($lis);
$lis.show("slow");

并且它有效，所以可以想象你可以做类似以下的事情，而不必担心迭代元素ID的麻烦：

$.load('/items/?p=2',function(data) {
    var $lis = $(data).hide();
    $('ul').append($lis);
    $lis.show("slow");
});

为了清楚起见，上面对 $ .load 的调用假定输出为您网站上的 / items /？p = 2 是一堆LI

Answer 2

如果您希望每个人以相同的速率出现，但每次之间稍有延迟，您可能需要使用setTimeout ...例如......

$(document).ready(function () {        
    var showListItem = function(index) {
        $("li#"+index).show("slow")
    };
    for(i=1;i<=10;i++) {
        setTimeout(function() { showListItem(i); }, (i * 100))
    }
});

这可能看起来有点傻，但如果我没记错的话，除非你将索引（i）包装在某种类型的外壳中，否则执行的方法总是会将i的值看作10。

Answer 3

另外，如果你在另一个通过Ajax加载新项目的事件（例如点击<！>“;更多<！>”按钮之后）触发这个，那么你需要确保你需要将你的逻辑包装起来jQuery 1.3中提供的 .live（）。

如果您使用的是jQuery 1.2，则可以使用 livequery 。

Answer 4

如果您有这样的列表，应该这样做：

<ul id='menu' style='display: none;'>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
</ul>

然后您可以编写代码以按顺序显示列表项：

$('#menu').show().find('li').hide().bind('show', function() {
  $(this).show('slow', function() {
    $(this).next('li').trigger('show');
  });
}).filter(':first').trigger('show');

代码执行以下操作：查找菜单<ul>，显示它，查找所有<li>并隐藏它们，绑定一个名为show的自定义事件，该事件缓慢显示该元素，并且一旦完全显示查看它旁边是否有<=>并触发该元素的相同事件。然后我们从所有<=>仅过滤第一个，并为它触发此自定义事件，基本上设置多米诺骨牌效应。

以下是工作中的一个示例。如果你想要它更快，你可以将'慢'改为'快'或时间。