Question

当UL.chapters为'slideDown'时，让第一个'章节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'));
        });
    });
}

这会调用第一个<li>上的幻灯片动画功能，然后在动画的回调中将其滑回到起始位置，它会调用下一个<li>上的函数。

以下是该动作的演示：http://jsfiddle.net/CBNgR/

Answer 2

您是否注意到代码的第4行是$（'章节LI'）而不是$（'。章节LI'）？

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

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

同时确保您的LI设置为绝对位置，否则您的左侧动画会出现问题。

Jquery：如何：当显示UL时，让第一个LI动画'左'20px，然后到0px，然后让第二个LI做那个，然后是第三个，等等

2 个答案: