jQuery中的动画队列

实例引入

制作如图的下拉菜单。
功能：鼠标移入时二级菜单向下展开，移出时二级菜单向上收回。

jQuery代码如下：

    $(function() {

        // 在入口函数绑定鼠标移动事件
        // 给一级菜单元素li的子元素ul（二级菜单列表）增加下滑/上滑动画
        $(".nav>li").hover(function() {

            // 绑定鼠标移入事件
            var $sub = $(this).children(".sub");
            $sub.slideDown(1000);

        }, function() {

            //绑定鼠标移出事件 
            var $sub = $(this).children(".sub");
            $sub.slideUp(1000);

        })
    })

页面结构如下：

问题： 当鼠标慢速移入移出一级菜单时，动画显示正常；但是，当鼠标快速移入移出多次时会发现：二级菜单的动画速度低于鼠标移动的速度，当鼠标暂停后，二级菜单持续下拉上滑，直到完成之前触发的所有事件。（仿佛是在自嗨）

造成这个现象的原因，正是标题中说到的动画队列。

• 鼠标第一次移入，触发a1（下拉动画）；
• a1未执行完，鼠标移出，触发a2（上滑动画）
• 鼠标移入移出多次后，就形成如图所示的动画队列，由于队列先进先出的特点，多个动画只能按照触发时间依次完成。（a1 → a2 → a3 → … ）

如此一来，就很影响用户体验。

解决方法：调用stop()

要让页面实时显示当前触发的动画，就必须清除队列中的之前触发的动画。

    // 修改鼠标移动事件的代码
    // 在执行当前动画之前，清除所有正在运行的动画（即清空动画队列）
    $(".nav>li").hover(function() {
            var $sub = $(this).children(".sub");

            // 清空动画队列
            $sub.stop();
            $sub.slideDown(1000);

        }, function() {
            var $sub = $(this).children(".sub");

            // 清空动画队列
            $sub.stop();
            $sub.slideUp(1000);
    })

动画队列的应用：链式编程

例：完成弹窗广告的动画效果：广告从右下方滑动进入视口，显示完全后淡出，然后快速淡入。

题目中要求的三个动画（滑动slideDown，淡出fadeOut，淡入fadeIn）是依次完成的，常规编程思路是代码嵌套，后一个动画的代码放入上一个动画的回调函数里。

    $(".ad").slideDown(1000, function(){
        $(this).fadeOut(1000, function(){
            $(this).fadeIn(1000);
        })
    })

代码嵌套，可读性差。

解决方法：

    //链式编程 
    //为保证动画效果，在slideDown前面加上stop方法
    $(".ad").stop().slideDown(1000).fadeOut(1000).fadeIn(200);