jquery顺序动画

Question

我正在尝试复制这个动画

http://tympanus.net/Tutorials/AnimatedContentMenu/

我无法为菜单项设置动画，只能按顺序向上滑动

    $('#bar').animate(
    {width: '100%'},
    {duration: 500,
    specialEasing: {width: 'linear'},
    complete: function() {
        $('li').each( function() {
                $(this).animate(
                    {top:'0px'},
                    {queue: true, duration: 200, specialEasing: {top: 'easeOutBack'},
                }); 
        });
    }
});

这样菜单项就会同时动画......出了什么问题？

Answer 1

由于队列是每个元素，所以实际上没有任何东西在排队，这就是为什么它们同时都具有动画效果。不过，有几种方法可以做到这一点。对于少量项目执行此操作的一种简单方法是使用 .delay() ，像这样:

$('#bar').animate(
    {width: '100%'},
    {duration: 500,
    specialEasing: {width: 'linear'},
    complete: function() {
        $('li').each(function(i) {
            $(this).delay(i*200).animate(
                {top:'0px'},
                {queue: true, duration: 200, specialEasing: {top: 'easeOutBack'},
            }); 
        });
    }
});

You can test a demo out here .

它的作用是延迟动画 200ms * .each() 中元素的索引迭代，所以第一个动画是即时的，第二个动画是 200 毫秒后，接下来的 200 毫秒，等等。我建议这样做的原因是你没有使用 200 毫秒的延迟，你可以使用较小的数字并且动画有一点重叠，这似乎就是您想要的效果。

执行此操作的另一种方法(更详细，仅按顺序，并且不允许重叠)是使用 .queue()构建您自己的，例如:

$('#bar').animate(
    {width: '100%'},
    {duration: 500,
    specialEasing: {width: 'linear'},
    complete: function() {
        $('li').each(function() {
            $(document).queue(function(n) {
              $(this).animate(
                {top:'0px'},
                {queue: true, duration: 200, specialEasing: {top: 'easeOutBack'},
                complete: n //call the next item in the queue             
              }); 
            });
        });
    }
});

You can test that version out here .