Question

所以我有一个清单：

<ul>
 <li> bla bla </li>
 <li> bla bla </li>
 ...
</ul>

<a> click me </a>

当您单击链接时，运行ajax请求以检索更多列表项。

如何将这些新项目附加到现有列表（点所在的位置），并逐个为它们设置动画，例如使用。滑落，小停顿，下一个项目滑落，小停顿等等......？

现在我有了这个，它同时动画所有列表项目：

  $.ajax({
      ... 
      success: function(response){

           $(response).appendTo("ul").hide().animate({
            "height": "show",
            "marginTop": "show",
            "marginBottom": "show",
            "paddingTop": "show",
            "paddingBottom": "show"},
            { duration: 333 });
      ...

Answer 1

您可以根据索引添加.delay()，如下所示：

jQuery(response).appendTo("ul").hide().each(function(i) {
   jQuery(this).delay(400*i).animate({
        "height": "show",
        "marginTop": "show",
        "marginBottom": "show",
        "paddingTop": "show",
        "paddingBottom": "show"}, 333);
});

这会立即运行第一个（400 * 0），第二个400毫秒（400 * 1）以后（67毫秒延迟）等等。只需将延迟调整到您想要的任何值，但这是一个简单的方法来获得一个 - 一个动画风格。

jQuery - 使用渐进动画将列表项追加到现有列表中

1 个答案: