[jQuery] Show LIs based on ID in sequence

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

Answer 2

Also, make sure that if you're triggering this upon another event that loads new items via Ajax (like after clicking the "More" button), then you need to wrap your logic in .live() that is available in jQuery 1.3.

If you're using jQuery 1.2, you can use livequery instead.

Answer 3

if you're wanting each one to appear at the same rate, but with a slight delay in between each, you may need to use setTimeout... for example...

$(document).ready(function () {        
    var showListItem = function(index) {
        $("li#"+index).show("slow")
    };
    for(i=1;i<=10;i++) {
        setTimeout(function() { showListItem(i); }, (i * 100))
    }
});

That might look a little silly, but if I remember correctly, unless you wrap your index (i) in an enclosure of some kind then the method that executes will always see the value of i as 10.

Answer 4

This should do it, if you have a list like so:

<ul id='menu' style='display: none;'>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
</ul>

You could then write code to show the list items sequentially like this:

$('#menu').show().find('li').hide().bind('show', function() {
  $(this).show('slow', function() {
    $(this).next('li').trigger('show');
  });
}).filter(':first').trigger('show');

The code is doing the following: Finding the menu <ul>, showing it, finding all the <li> and hiding them, binding a custom event called show which slowly shows the element, and once it is fully shown looks to see if there are any <li> next to it and triggers the same event for that element. Then we filter from all the <li> only the first one, and trigger this custom event for it, essentially setting off the domino effect.

Here is an example of it at work. If you wanted it faster you could change 'slow' to 'fast' or a time.

Answer 5

Hi Paolo,

How would you create a "ready" alert when all LI's are done? I have to trigger another animated UL when the first is ready.

Thanks in advance for your suggestion.

Marc