javascript - Jquery：如何：当显示 UL 时，让第一个 LI 动画“左”20px，然后到 0px，然后让第二个 LI 这样做，然后是第三个，等等

Question

当 UL.chapters 为 'slideDown' 时，让第一个 'chapters LI' 将 'left' 属性设置为 20px，然后设置回 0px，然后让第二个 LI 做同样的事情，然后让第三个，依此类推. 使用我的代码，它们都在 UL.chapters 向下滑动后直接设置动画，我如何让它们一次执行 1 个动画，第二个直到第一个完成后才开始，等等。

$('h1').click(function() {
    $('UL.chapters').slideDown(500);
    $('.chapters LI').each(function() {
        $(this).animate({'left':'20px'});
        $(this).animate({'left':'0px'});
    });
});

代码更新。

Answer 1

试试这个：

$(function() {
    $('h1').click(function() {
        $('.chapters').slideDown(500, function() {
            doSlide($('.chapters li:first'));
        });
    });

});


function doSlide(current) {
    $(current).animate({
        'left': '20px'
    }, function() {
        $(current).animate({
            'left': '0px'
        }, function() {
            doSlide($(current).next('li'));
        });
    });
}

这会在 first 上调用幻灯片动画函数<li>，然后在将其滑回起始位置的动画回调中，它会在 next 上调用该函数<li>。

这是它的实际演示：http: //jsfiddle.net/CBNgR/

Answer 2

您是否注意到代码的第 4 行是 $('chapters LI') 而不是 $('.chapters LI')？

你也在这里重复自己。试试这个：

$('h1').click(function() {
    $('UL.chapters').slideDown(500);
    $('.chapters LI').each(function() {
        $(this).animate({'left':'20px'});
        $(this).animate({'left':'0px'});
    });
});

还要确保你的 LI 设置为绝对位置，否则你的左动画会有问题。