jQuery - append list items to existing list with gradual animation

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",
            "m开发者_C百科arginTop": "show",
            "marginBottom": "show",
            "paddingTop": "show",
            "paddingBottom": "show"},
            { duration: 333 });
      ...

---

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.