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()迭代中元素的索引，因此第一个动画是即时的，第二个200ms后，接下来的200ms，等等。我推荐的原因这是你不使用200ms来延迟，你可以使用较小的数字并让动画重叠一点，这似乎是你所追求的效果。

另一种方法（更详细，仅顺序，不允许重叠）是使用.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

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

您可以使用Array来包含元素：

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);

jquery顺序动画

4 个答案: