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

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

这样做是将动画延迟 200 毫秒 *.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             
              }); 
            });
        });
    }
});

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

Answer 2

每个元素的队列都是唯一的，这意味着每个元素都有自己独立的队列。在每个项目的动画完成后使用回调。示例：如果您有五个 li 标签，请为其中的前四个使用特定类，并向该类的动画添加回调以执行下一个元素的动画。

Answer 3

这是我用于顺序动画的：

for (var i = 1; i < 10; i++) {
    $('#bullet-' + i).delay(i * 1000 - 1000).fadeIn('fast', function () {
        var id = this
        setTimeout (function () {$(id).css('color', 'lightgray');}, 1500);
    });
}

Answer 4

您应该使用数组来包含元素：

var Menus = ['menu_1', 'menu_2', 'menu_3', 'menu _4', 'menu _5'];

然后为元素定义一个 for 循环，每轮循环增加值（250ms）：

function myFn(time){
    for(var i = 0; i < Menus.length; i++){
      $('#' + Menus[i]).animate({'opacity' : 1}, time, 'easeInOutQuad');
      time = ++time + 250;
    };
  };

并调用以 ms 为单位定义起始值的函数：

myFn(500);