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

你可以在这里测试一个演示.

这样做是耽误动画的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             
              }); 
            });
        });
    }
});

你可以在这里测试那个版本.