jQuery:如何在显示前一个列表项后动态显示隐藏的列表项？

Question

每个列表项都是“隐藏的”，并且每个列表只能在列表项被显示之前显示在列表项之后。

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

如果总是有3个列表项，则上面的jQuery代码可以工作，但是如何修改该代码以容纳任意数量的列表项？

谢谢你的帮助！

Answer 1

您可以对选择器使用.list-item类，并在.each()中使用.delay()将动画延迟为当前迭代的index值乘以500毫秒。

尝试一下： 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/

.delay()需要jQuery 1.4或更高版本。

编辑：这会更有效率一点。

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

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

Answer 2

你为什么不用display: none;呢？

这样，您就可以使用选择器$("ul li:hidden:first")选择下一个隐藏的li。未经过测试，但应该不起作用。:)

编辑:要制作动画，您可以使用jquery函数slideToggle()或slideDown()，而不仅仅是show()

Answer 3

一个递归函数可能就是你想要的。如下所示：

function animateCascade(element){
    var element = $(element);

    if (element.length==0) return; // no more elements

    element.animate(
        {top: '0'},
        500,
        function(){
            animateCascade(element.next('.list-tem')); // get the next LI
        }
    );
}
animateIt($('#list-1')); // start at the beginning LI