2

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

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

但是，这不起作用。我需要它来将效果应用于 LI#1，然后是 LI#2、LI#3……等等。

我正在尝试做的类似于 Twitter 在您单击页面底部的“更多”按钮而不是跳跃时所做的事情，我希望它放松一下。

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

但是，如果有一种方法可以在 UL 改变大小时对其进行动画处理，我会全力以赴。

4

4 回答 4

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

看看show( speed, [callback] )。从文档：

使用优美的动画显示所有匹配的元素，并在完成后触发可选的回调。

每个匹配元素的高度、宽度和不透明度根据指定的速度动态变化。

此外，还有其他方法可以隐藏和显示元素，例如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

于 2009-06-20T03:37:56.780 回答
1

如果您希望每个都以相同的速度出现，但每个之间有轻微的延迟，您可能需要使用 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。

于 2009-06-20T04:15:28.483 回答
0

此外，请确保如果您在另一个通过 Ajax 加载新项目的事件上触发此事件（例如在单击“更多”按钮之后），那么您需要将逻辑包装在 jQuery 1.3 中可用的.live()中。

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

于 2009-06-20T03:41:13.047 回答
0

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

<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>，并为它触发这个自定义事件，基本上触发了多米诺骨牌效应。

这是它在工作中的一个例子。如果您想要更快，您可以将“慢”更改为“快”或一段时间。

于 2009-06-20T04:55:24.163 回答