Home/ Questions/Q 3341636
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T00:44:44+00:00

So I have a list: <ul> <li> bla bla </li> <li> bla bla </li>

  • 0

So I have a list:

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

<a> click me </a>

when you click the link a ajax request runs that retrieves more list items.

How can I append these new items to the existing list (where the dots are), and animate them one by one, using for eg. slidedown, small pause, next item slidedown, small pause again etc… ?

right now I have this, which animates all list items simultaneously:

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

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    you can add a .delay()based on the index, like this:

    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);
});

    This runs the first instantly (400*0), the second 400ms (400*1) later (67ms delay), etc. Just adjust the delay to whatever you want, but this is an easy way to get the one-by-one animation style.

    • 0