jQuery: how to dynamically show "hidden" list items after the previous list item has been shown?
<p>Each of the list items is "hidden" and each list can only be shown after the list item before it has been shown.</p>

<pre><code>// HTML
&lt;ul&gt;
    &lt;li id="list-1" class="list-item"&gt;
        &lt;a href="#"&gt;List 1&lt;/a&gt;
    &lt;/li&gt;
    &lt;li id="list-2" class="list-item"&gt;
        &lt;a href="#"&gt;List 2&lt;/a&gt;
    &lt;/li&gt;
    &lt;li id="list-3" class="list-item"&gt;
        &lt;a href="#"&gt;List 3&lt;/a&gt;
    &lt;/li&gt;
&lt;/ul&gt;



// 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)
    })  
})
</code></pre>

<p>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? </p>

<p>Thanks for any help!</p>
