Question

Each of the list items is “hidden” and each list can only be shown after the list item before it has been shown.

// HTML
<ul>
    <li id="list-1" class="list-item">
        <a href="#">List 1</a>
    </li>
    <li id="list-2" class="list-item">
        <a href="#">List 2</a>
    </li>
    <li id="list-3" class="list-item">
        <a href="#">List 3</a>
    </li>
</ul>



// CSS
ul li {
    overflow: hidden;
    position: relative;
}

ul li a {
    position: relative;
    top: -20px;
}


// jQuery
$('#list-1').animate({
    top: '0'
}, 500, function() {
    $('#list-2').animate({
        top: '0'
    }, 500, function() {
        $('#list-3').animate({
            top: '0'    
        }, 500)
    })  
})

The jQuery code above works if there is always going to be 3 list items, but how can that code be modified to accomodate any number of list items?

Thanks for any help!

Answer 1

You could use the .list-item class for the selector, and inside an .each(), use .delay() to delay the animation by the index value of the current iteration multiplied by 500 milliseconds.

Try it out: http://jsfiddle.net/EFGCM/

$('ul > li.list-item').each(function( i ) {
    $('a',this).delay( i * 500 ).animate({ top: '0'}, 500);
});

• http://api.jquery.com/each/
• http://api.jquery.com/delay/

The .delay() requires jQuery 1.4 or later.

---

EDIT: This would be a little more efficient.

http://jsfiddle.net/EFGCM/3/

$('ul > li.list-item > a').each(function(i) {
    $(this).delay(i * 500).animate({ top: '0'}, 500);
});