CODEWITHSUNDEEP
javascriptjqueryhtmlanimationeffects
Alex
Alex

Reputation: 67238

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",
            "marginTop": "show",
            "marginBottom": "show",
            "paddingTop": "show",
            "paddingBottom": "show"},
            { duration: 333 });
      ...

Upvotes: 2

Views: 1327

Answers (1)

Nick Craver
Nick Craver

Reputation: 630579

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.

Upvotes: 3

Related Questions