javascript - jQuery - 使用渐变动画将列表项附加到现有列表

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)，第二个 400ms(400*1)稍后运行(67ms 延迟)，等等。只需将延迟调整到您想要的任何值，但这是获得一个的简单方法-逐一动画风格。