jQuery的连续动画 [英] jquery sequential animation

问题描述

我试图复制这个动画

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

我不能动画菜单项，比滑动比上一季度

i'm not able to animate the menu items, than sliding up sequentially

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

在这样的菜单项同时动画.....怎么了？

In this way the menu items are animated simultaneously.....what's wrong?

推荐答案

由于队列的每个元素的，没有什么实际上是在这里排队，这就是为什么他们都在动画一次。有几个方法可以做到这一点，虽然。一个简单的办法用小数量的项目要做到这一点是 .delay（） ，像这样的：

Since the queue is per element, nothing is actually queueing here, that's why they're all animating at once. There are a few ways to do this though. One simple way to do this with a small number of items is with .delay(), like this:

$('#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毫秒的动画*在 。每（）<元素的索引/ code> 迭代，所以第一个动画是即时的，第二个200毫秒后，后，下一个200毫秒，等我推荐这是你做的不是这个原因的有无的到使用200毫秒的延迟，你可以使用一个较小的数字，并有动画重叠了一下，这似乎是你后的效果。

What this does is delay the animation 200ms * the index of the element in the .each() iteration, so the first animations is instant, the second 200ms later, the next 200ms after that, etc. The reason I recommend this is you don't have to use 200ms for the delay, you can use a smaller number and have the animations overlap a bit, which seems to be the effect you're after.

另一种方式来做到这一点（更详细的，只是顺序，并允许无重叠）是使用 .queue （） 来建立你自己的，例如：

Another way to do this (more verbose, sequential only, and allows no overlap) is to use .queue() to build your own, for example:

$('#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             
              }); 
            });
        });
    }
});

您可以在这里测试版本。

这篇关于jQuery的连续动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！