Question

I’m working on creating a for-loop that calls a javascript effect and applies it to an LI, doing it in sequence. Here’s what I’ve got:

$(document).ready(function () {
    for(i=1;i<=10;i++) {
        $("li#"+i).show();
    }
});

However, this doesn’t work. I need it to apply the effect to LI#1 then LI#2, LI#3… and so on.

What I’m trying to do is similar to what Twitter does when you click the “more” button at the bottom of the page only instead of jumping I want it to ease down.

EDIT: I can’t just wrap the LIs in a DIV as I’m going to be adding LIs to a UL element.

However, if there was a way to animate the UL as it changed size I’d be all for that.

Answer 1

$(document).ready(function () {
    for(i=1;i<=10;i++) {
        $("li#"+i).show("slow");
    }
});

Have a look at show( speed, [callback] ). From the doc:

Show all matched elements using a
graceful animation and firing an
optional callback after completion.

The height, width, and opacity of each
of the matched elements are changed
dynamically according to the specified
speed.

Also, there are other ways to hide and reveal elements, such as fadeIn and fadeOut. Have a look at http://docs.jquery.com/Effects .

I did a quick mock-up of the kind of thing you are after with static data:

var $lis = $('<li>blha blhahah lajlkdj</li><li>blha blhahah lsdfsajlkdj</li>').hide();
$('ul').append($lis);
$lis.show("slow");

and it works, so it is conceivable that you could do something like the following, and not have to bother with the headache of iterating over element IDs:

$.load('/items/?p=2',function(data) {
    var $lis = $(data).hide();
    $('ul').append($lis);
    $lis.show("slow");
});

Just to be clear, the above call to $.load assumes that the output of /items/?p=2 on your site is a bunch of LIs