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显示所有匹配的元素   优雅的动画和射击   完成后可选回调。

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

此外，还有其他隐藏和显示元素的方法，例如fadeIn和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加载新项目的事件（例如点击“更多”按钮后）触发此操作，请确保您需要将逻辑包装在.live()中在jQuery 1.3中。

如果您使用的是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的自定义事件，该事件缓慢显示该元素，并且一旦完全显示，查看旁边是否有<li>并触发该元素的相同事件。然后我们只从第一个<li>过滤掉，然后为它触发这个自定义事件，主要是设置多米诺骨牌效应。

Here is an example of it at work。如果你想要它更快，你可以将'慢'改为'快'或时间。

依次按ID显示LI

4 个答案: