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

.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

Answer 4

替代解决方案

function slide($li) {
    if ($li.length == 0) return;
    $li.slideDown(500, function() {
        slide( $li.next(".list-item") );
    });
}

slide( $("ul li:hidden:first") );

示例：http://jsfiddle.net/MXxkd/

jQuery：如何在显示上一个列表项后动态显示“隐藏”列表项？

4 个答案: