使用动画效果的关键一点是控制好每个效果的发生顺序。下面按照元素分组（一组元素和多组元素）来讨论。

管理一组元素的动画启动顺序。一组元素是指对同一个元素定义多个动画效果的情况。

• 以连缀的形式定义的多个动画是按顺序依次发生的（排队效果）。

• 在.animate()函数中定义的多个动画是同时发生的。也就是说，如果在.animate()中定义了多个CSS属性，这些属性会同时发生变化。

• 非效果方法（如：.css()定义的效果）会立刻发生，默认没有排队效果，可以使用.queue()函数将非效果方法排入队列，使其实现排队效果。

HTML代码如下：

<div>
    <p class="action1">action1</p>
    <a href="#">go</a>
</div>

1、连缀的排队效果：

$(document).ready(function () {
    $('a').click(function () {
        $('p').slideUp(1000).slideDown(1000).fadeOut(1000).fadeIn(1000);
        return false;
    });
});

以上代码中，当链接a被点击后，p元素会依次完成滑上、滑下、淡出、淡入等动作，每个动作都是在上一个动作完成后触发，连缀实现了排队效果。

2、.animate()内动画的并发效果：

$(document).ready(function () {
    $('a').click(function () {
        $('p').animate({'font-size':'50px','padding':'50px'},1000);
        return false;
    });
});

以上代码中，当链接a被点击后，p元素的字体会由默认大小变为50px，内边距会由默认大小变为50px，字体和内边距的变化是同步发生的。

3、.animate()非排队（跳出队列）效果。

$(document).ready(function () {
    $('a').click(function () {
        $('p')
            .fadeOut(2000)
            .fadeIn(2000)
            .animate(
                {'font-size': '50px', 'padding': '50px'},
                {duration: '1000', queue: false}
            );
        return false;
    });
});

以上代码中，当链接a被点击后，p元素并不会先淡出再淡入，然后开始字体和内边距的变化。.animate()函数中的queue属性被设置为false，因此，.animate()函数动画不再进行排队，而是在链接a被点击后，立刻开始p元素字体和内边距的变化。因为.animate()会在1000 毫秒内完成动作，而.fadeOut()需要2000毫秒，所以看上去，p元素好像是完成字体和内边距的变化后再进行淡出淡入，实际上，字体和内边距的变化与淡出是同时启动的，只不过字体和内边距的变化快一些而已。

这里如果将.animate()的queue属性值设为true，那么.animate()就会跟.fadeOut()和.fadeIn()一样乖乖听话的排队了。

4、非效果方法实现排队效果：

$(document).ready(function () {
    $('a').click(function () {
        var theP = $('p');
        theP
            .slideUp(1000)
            .slideDown(1000)
            .queue(function (next) {
                theP.css({color: 'red'});
                next();
            })
            .fadeOut(1000)
            .fadeIn(1000);
        return false;
    });
});

以上代码中，通过使用.queue()函数实现了对非效果方法（.css()）的排队效果。.queue()函数的参数是一个匿名函数，这里又称回调函数，其中的next()是必须的，不然动画在这里就会中断。

管理多组元素的动画启动顺序。多组元素是指对不同的元素定义多个动画效果的情况。

当为多组元素定义动画时，不同元素的动画默认是同时启动的。

HTML代码如下：

<div>
    <p class="action1">action1</p>
    <p class="action2">action2</p>
    <a href="#">go</a>
</div>

1、两组元素动画并发效果：

$(document).ready(function () {
    $('a').click(function () {
        $('p.action1').slideUp(1000).slideDown(1000);
        $('p.action2').fadeOut(1000).fadeIn(1000);
        return false;
    });
});

以上代码中，当链接a被点击后，元素p.action1和p.action2会同时启动各自的动画，p.action1会先后完成滑上滑下；p.action2会先后完成淡出淡入。两组动画是并发效果。

2、两组元素动画排队效果：

$(document).ready(function () {
    $('a').click(function () {
        $('p.action1').slideUp(1000).slideDown(1000, function () {
            $('p.action2').fadeOut(1000).fadeIn(1000);
        });
        return false;
    });
});

要实现多组元素动画的排队效果只需要将后续动画放入前部动画的回调函数内，如以上代码那样，在p.action1的.slideDown()函数内引入回调函数，并将后续元素动画放入其中就可以实现多组元素的排队效果了。

以上代码中，当链接a被点击后，元素p.action1会先完成滑上滑下，然后p.action2启动，依次完成淡出淡入。

要实现多组元素的排队效果，除了以上方法外，还可以使用管理一组元素动画启动顺序中应用的.queue()方法。