jQuery源码解析（5）—— Animation动画

闲话

jQuery的动画机制有800行， 虽然不如样式的1300行，难度上却是不减。由于事前不了解animate接口的细节使用规则，看代码期间吃了很多苦头，尤其是深恶痛绝的defaultPrefilter函数，靠着猜想和数次的逐行攻略，终于全部拿下。本文将一点一点拆解出jq的动画机制及具体实现，解析各种做法的目的、解耦的方式、必要的结构、增强的辅助功能。

需要提前掌握queue队列的知识，css样式机制、data缓存、deferred对象至少要了解核心API的功能。有兴趣可以参考我之前的几篇分析。

（本文采用 1.12.0 版本进行讲解，用 #number 来标注行号）

动画机制

jQuery的动画机制比较复杂，下面将逐一分析其中要点。

全局Interval

教学时常用的动画函数demo，结构是下面这样：

/* demo */

// json -> { prop1: end1, prop2: end2 ...} 属性与终点的名值对，可一次运动多属性
function Animation( elem, json, duration, callback ) {

    // some code...

    // 每步运动
    var tick = function() {
        // 对每个属性算出每步值，并设置。到终点时取消定时器，并执行回调 callback()
    };
    elem.timer = setInterval(tick, 20);
}

如何计算每步运动的值需要讲究，举个栗子：

// 方式 1
// 计算次数，算出每次增量（与定时器的设置时间，严格相关）
times = duration / 20;
everyTimeAddNum = ( end - start ) / timers;

// 方式 2
// 计算当前流逝的比例，根据比例设置最终值（有定时器即可，与定时时间无关）
passTime = ( +new Date() - createTime ) / duration;
passTime = passTime > 1 ? 1 : passTime;
toValue = ( end - start ) * passTime + start;

方式2为标准的使用法则，方式1虽然很多人仍在使用包括教学，但是会出现如下两个问题：

问题1：js单线程

javascript是单线程的语言，setTimeout、setInterval定时的向语言的任务队列添加执行代码，但是必须等到队列中已有的代码执行完毕，若遇到长任务，则拖延明显。对于”方式1”，若在tick内递归的setTimout，tick执行完才会再次setTimeout，每次的延迟都将叠加无法被追偿。setInterval也不能幸免，因为js引擎在使用setInterval()时，仅当队列里没有当前定时器的任何其它代码实例时，才会被添加，而次数和值的累加都是需要函数执行才会生效，因此延迟也无法被追偿。

问题2：计时器精度

浏览器并不一定严格按照设置的时间（比如20ms）来添加下一帧，IE8及以下浏览器的精度为15.625ms，IE9+、Chrome精度为4ms，ff和safari约为10ms。对于“方式1”这种把时间拆为确定次数的计算方式，运动速度就一点不精确了。

jQuery显然采用了”方式2”，而且优化了interval的调用。demo中的方式出现多个动画时会造成 interval 满天飞的情况，影响性能，既然方式2中动画逻辑与定时器的时间、调用次数无关，那么可以单独抽离，整个动画机制只使用一个统一的setInterval，把tick推入堆栈jQuery.timers，每次定时器调用jQuery.fx.tick()遍历堆栈里的函数，通过tick的返回值知道是否运动完毕，完毕的栈出，没有动画的时候就jQuery.fx.stop()暂停。jQuery.fx.start()开启定时器前会检测是开启状态，防止重复开启。每次把tick推入堆栈的时候都会调用jQuery.fx.start()。这样就做到了需要时自动开启，不需要时自动关闭。

[源码]

// #672
// jQuery.timers 当前正在运动的动画的tick函数堆栈
// jQuery.fx.timer() 把tick函数推入堆栈。若已经是最终状态，则不加入
// jQuery.fx.interval 唯一定时器的定时间隔
// jQuery.fx.start() 开启唯一的定时器timerId
// jQuery.fx.tick() 被定时器调用，遍历timers堆栈
// jQuery.fx.stop() 停止定时器，重置timerId=null
// jQuery.fx.speeds 指定了动画时长duration默认值，和几个字符串对应的值

// jQuery.fx.off 是用在确定duration时的钩子，设为true则全局所有动画duration都会强制为0，直接到结束状态

// 所有动画的"每步运动tick函数"都推入timers
jQuery.timers = [];

// 遍历timers堆栈
jQuery.fx.tick = function() {
    var timer,
        timers = jQuery.timers,
        i = 0;

    // 当前时间毫秒
    fxNow = jQuery.now();

    for ( ; i < timers.length; i++ ) {
        timer = timers[ i ];

        // 每个动画的tick函数（即此处timer）执行时返回remaining剩余时间，结束返回false
        // timers[ i ] === timer 的验证是因为可能有瓜娃子在tick函数中瞎整，删除jQuery.timers内项目
        if ( !timer() && timers[ i ] === timer ) {
            timers.splice( i--, 1 );
        }
    }

    // 无动画了，则stop掉全局定时器timerId
    if ( !timers.length ) {
        jQuery.fx.stop();
    }
    fxNow = undefined;
};

// 把动画的tick函数加入$.timers堆栈
jQuery.fx.timer = function( timer ) {
    jQuery.timers.push( timer );
    if ( timer() ) {
        jQuery.fx.start();
    // 若已经在终点了，无需加入
    } else {
        jQuery.timers.pop();
    }
};

// 全局定时器定时间隔
jQuery.fx.interval = 13;

// 启动全局定时器，定时调用tick遍历$.timers
jQuery.fx.start = function() {
    // 若已存在，do nothing
    if ( !timerId ) {
        timerId = window.setInterval( jQuery.fx.tick, jQuery.fx.interval );
    }
};

// 停止全局定时器timerId
jQuery.fx.stop = function() {
    window.clearInterval( timerId );
    timerId = null;
};

// speeds（即duration）默认值，和字符串的对应值
jQuery.fx.speeds = {
    slow: 600,
    fast: 200,

    // Default speed，默认
    _default: 400
};

同步、异步

jQuery.fn.animate

jQuery动画机制最重要的一个考虑是：动画间便捷的同步、异步操作。

jQuery允许我们通过$().animate()的形式调用，对应的外观方法是jQuery.fn.animate( prop, speed, easing, callback )，内部调用动画的核心函数Animation( elem, properties, options )。

上面的demo虽然粗糙，但是思路一致。Animation一经调用，内部的tick函数将被jQuery.fx.timer函数推入jQuery.timers堆栈，立刻开始按照jQuery.fx.interval的间隔运动。要想使动画异步，就不能立即调用Animation。在回调callback中层层嵌套来完成异步，显然是极不友好的。jQuery.fn.animate中使用了queue队列，把Animation函数的调用封装在doAnimation函数中，通过把doAnimation推入指定的队列，按照队列顺序异步触发doAnimation，从而异步调用Animation。

queue队列是一个堆栈，比如elem的”fx”队列，jQuery.queue(elem, “fx”)即为缓存jQuery._data(elem, “fxqueue”)。每个元素的”fx”队列都是不同的，因此不同元素或不同队列之间的动画是同步的，相同元素且相同队列之间的动画是异步的。添加到”fx”队列的函数若是队列中当前的第一个函数，将被直接触发，而添加到其他队列中的函数需要手动调用jQuery.dequeue才会启动执行。

如何设置添加的队列呢？jQuery.fn.animate支持对象参数写法jQuery.fn.animate( prop, optall)，通过 optall.queue指定队列，未指定队列的按照默认值”fx”处理。speed、easing、callback均不是必须项，内部通过jQuery.speed将参数统一为对象optall。optall会被绑定上被封装过的optall.complete函数，调用后执行dequeue调用队列中下一个doAnimation（后面会讲Animation执行完后如何调用complete自动执行下一个动画）

虽然加入了queue机制后，默认的动画顺序变为了异步而非同步。但optall.queue指定为false时，不使用queue队列机制，doAnimation将立即调用Animation执行动画，保留了原有的同步机制。

/* #7888 jQuery.speed * 设置参数统一为options对象 ---------------------------------------------------------------------- */
// 支持的参数类型（均为可选参数，只有fn会参数提前。无speed设为默认值，无easing在Tween.prototype.init中设为默认值）
// (options)
// (speed [, easing | fn])
// (speed, easing, fn)
// (speed)、(fn)
jQuery.speed = function( speed, easing, fn ) {
    var opt = speed && typeof speed === "object" ? jQuery.extend( {}, speed ) : {
        complete: fn || !fn && easing ||
            jQuery.isFunction( speed ) && speed,
        duration: speed,
        easing: fn && easing || easing && !jQuery.isFunction( easing ) && easing
    };

    // jQuery.fx.off控制全局的doAnimation函数生成动画的时长开关
    opt.duration = jQuery.fx.off ? 0 : typeof opt.duration === "number" ? opt.duration :
        // 支持 "slow" "fast"，无值则取默认400
        opt.duration in jQuery.fx.speeds ?
            jQuery.fx.speeds[ opt.duration ] : jQuery.fx.speeds._default;

    // true/undefined/null -> 设为默认队列"fx"
    // false不使用队列机制
    if ( opt.queue == null || opt.queue === true ) {
        opt.queue = "fx";
    }

    opt.old = opt.complete;

    // 对opt.complete进行再封装
    // 目的是该函数可以dequeue队列，让队列中下个doAnimation开始执行
    opt.complete = function() {
        // 非函数或无值则不调用
        if ( jQuery.isFunction( opt.old ) ) {
            opt.old.call( this );
        }

        // false不使用队列机制
        if ( opt.queue ) {
            jQuery.dequeue( this, opt.queue );
        }
    };

    return opt;
};


/* #7930 jQuery.fn.animate * 外观方法，对每个elem添加动画到队列（默认"fx"队列，为false不加入队列直接执行） ---------------------------------------------------------------------- */
jQuery.fn.animate = function( prop, speed, easing, callback ) {
    // 是否有需要动画的属性
    var empty = jQuery.isEmptyObject( prop ),
        // 参数修正到对象optall
        optall = jQuery.speed( speed, easing, callback ),
        doAnimation = function() {

            // 执行动画，返回一个animation对象（后面详细讲）
            var anim = Animation( this, jQuery.extend( {}, prop ), optall );

            // jQuery.fn.finish执行期间jQuery._data( this, "finish" )设置为"finish"，所有动画创建后都必须立即结束到end，即直接运动到最终状态（后面详细讲）
            if ( empty || jQuery._data( this, "finish" ) ) {
                anim.stop( true );
            }
        };
        // 用于jQuery.fn.finish方法内判断 queue[ index ] && queue[ index ].finish。比如jQuery.fn.delay(type)添加到队列的方法没有finish属性，不调用直接舍弃
        doAnimation.finish = doAnimation;

    return empty || optall.queue === false ?
        // 直接遍历执行doAnimation
        this.each( doAnimation ) :
        // 遍历元素把doAnimation加入对应元素的optall.queue队列
        this.queue( optall.queue, doAnimation );
};

jQuery.fn.stop/finish

现在我们有了同步、异步两种方式，但在同步的时候，有可能出现重复触发某元素动画，而我们并不需要。在jq中按照场景可分为：相同队列正在运动的动画、所有队列正在运动的动画、相同队列所有的动画、所有队列的动画、非队列正在运动的动画。停止动画分为两种状态：直接到运动结束位置、以当前位置结束。

实现原理

清空动画队列，调用$(elems).queue( type, [] )，会替换队列为[]，也可以事先保存队列，然后逐个执行，这正是jQuery.fn.finish的原理。停止当前动画，jQuery.timers[ index ].anim.stop( gotoEnd )。gotoEnd为布尔值，指定停止动画到结束位置还是当前位置，通过timers[ index ].elem === this && timers[ index ].queue === type匹配队列和元素，从这里也能看出Animation函数中的单步运动tick函数需要绑定elem、anim、queue属性（anim是Animation返回的animation对象，stop函数用来结束当前动画，后面会详细讲）。

然而并不是添加到队列的都是doAnimation，比如jQuery.fn.delay()，由于没调用Animation，所以没有tick函数，自然没有anim.stop，从jq源码中可以看出，推荐在队列的hook上绑定hooks.stop停止函数（因此stop/finish中会调用hooks.stop）。queue队列中被执行的函数备注了的next函数（dequeue操作，调用下一个）和对应的hook对象（$._data(type+’queuehook’)缓存，empty.fire用于自毁）和this（元素elem），因此可以通过next调用下一项。

/* #8123 jQuery.fn.delay * 动画延迟函数 ---------------------------------------------------------------------- */
jQuery.fn.delay = function( time, type ) {
    time = jQuery.fx ? jQuery.fx.speeds[ time ] || time : time;
    type = type || "fx";

    return this.queue( type, function( next, hooks ) {
        var timeout = window.setTimeout( next, time );
        hooks.stop = function() {
            // 取消延迟调用next
            window.clearTimeout( timeout );
        };
    } );
};

jQuery.fn.stop( type, clearQueue, gotoEnd )：type指定队列（false会变成”fx”，本方法不能停止非队列，需要使用jQuery.fn.finish(false)）；clearQueue为true为清除队列后续动画，false为不清除；gotoEnd为true表示直接到运动结束位置，false为当前位置结束

注：type无字符串值时，clearQueue, gotoEnd参数提前，type设为undefined。（对于type为null/undefined的处理很特别。对”fx”按照clearQueue值处理，但是对元素所有队列动画都停止，按照goToEnd值处理。非队列动画不受影响）

jQuery.fn.finish( type )：type指定队列（默认”fx”，false表示非队列），执行过程中标记jQuery._data( this ).finish=true，清空queue队列，并且遍历执行队列中所有doAnimation函数（有finish属性的才是doAnimation函数）。由于缓存中带有finish标记，动画对象一创建就将调用anim.stop( true )
所有动画直接到结束状态。

jQuery.fn.extend( {

    /* #7949 jQuery.fn.stop * 停止当前动画 ---------------------------------------------------------------------- */
    // 指定type，则该type clearQueue gotoEnd
    // type无值，则"fx" clearQueue，所有type gotoEnd
    stop: function( type, clearQueue, gotoEnd ) {

        // 用于删除"非doAnimation"动画(没有tick函数加入timers堆栈全局interval执行，而是直接执行的，上面有介绍)
        var stopQueue = function( hooks ) {
            var stop = hooks.stop;
            delete hooks.stop;
            stop( gotoEnd );
        };

        // 参数提前，type=false当做"fx"处理（不支持非队列，不得不怀疑有可能是开发者的纰漏）
        if ( typeof type !== "string" ) {
            gotoEnd = clearQueue;
            clearQueue = type;
            type = undefined;
        }
        // type不可能为false（有些多余）
        if ( clearQueue && type !== false ) {
            this.queue( type || "fx", [] );
        }

        // 遍历元素
        return this.each( function() {
            var dequeue = true,
                // type只有undefined和字符串两种可能
                index = type != null && type + "queueHooks",
                timers = jQuery.timers,
                data = jQuery._data( this );

            // 显式指定了队列，stop"非doAnimation"动画，并删除stop函数自身
            if ( index ) {
                if ( data[ index ] && data[ index ].stop ) {
                    stopQueue( data[ index ] );
                }

            // type为undefined，遍历查找所有带有stop方法的所有队列的hook缓存属性，并调用删除
            // rrun = /queueHooks$/
            } else {
                for ( index in data ) {
                    if ( data[ index ] && data[ index ].stop && rrun.test( index ) ) {
                        stopQueue( data[ index ] );
                    }
                }
            }

            // 对timers中全局interval正在进行的动画，对该元素该队列的执行stop（type为undefined则该元素的全部stop）
            for ( index = timers.length; index--; ) {
                if ( timers[ index ].elem === this &&
                    ( type == null || timers[ index ].queue === type ) ) {

                    // gotoEnd为true直接到最终状态，为false停止在当前状态
                    // gotoEnd为true，stop内部会调用run(1)，并resolve触发promise，从而执行complete函数，从而dequeue下一个动画（Animation处会详细讲）
                    // gotoEnd为false，就不会自动dequeue了，需要下面手动dequeue到下一个
                    timers[ index ].anim.stop( gotoEnd );
                    dequeue = false;
                    timers.splice( index, 1 );
                }
            }

            // 后续的动画继续进行，如果还有并且没被clearQueue的话
            // 只有经过了元素动画stop的过程，且gotoEnd为true（内部dequeue过）才不需要手动dequeue
            // "非doAnimation"动画也是需要手动dequeue的
            if ( dequeue || !gotoEnd ) {
                jQuery.dequeue( this, type );
            }
        } );
    },

    /* #8001 jQuery.fn.finish * 当前 ---------------------------------------------------------------------- */   
    finish: function( type ) {

        // undefined/null变为"fx"，false仍然是false
        if ( type !== false ) {
            type = type || "fx";
        }
        return this.each( function() {
            var index,
                data = jQuery._data( this ),
                // 先拿到队列堆栈，因为下面队列缓存将替换为[]
                queue = data[ type + "queue" ],
                hooks = data[ type + "queueHooks" ],
                timers = jQuery.timers,
                length = queue ? queue.length : 0;

            // 标记为finish阶段，此时所有的doAnimation执行时都会立即调用anim.stop(true)，直接到动画结束的样子
            // 注意：由于js是单线程的，虽然这里data与哪个队列是无关的，看似其他type也被影响，但其实即使全局interval的tick也必须等该函数执行完，那时data.finsh已经不在了
            data.finish = true;

            // 清空queue，这样下面的
            jQuery.queue( this, type, [] );

            // stop掉type对应的"非doAnimation"动画
            if ( hooks && hooks.stop ) {
                hooks.stop.call( this, true );
            }

            // 正在执行的动画anim.stop(true)直接到最终状态
            for ( index = timers.length; index--; ) {

                // type为false的非队列，也支持判断
                if ( timers[ index ].elem === this && timers[ index ].queue === type ) {
                    timers[ index ].anim.stop( true );
                    timers.splice( index, 1 );
                }
            }

            // 原来队列里的doAnimation函数遍历执行，data.finish为true，因此都会直接到运动结束状态
            for ( index = 0; index < length; index++ ) {
                // "非doAnimation"没有finish属性，该属性指向自身
                if ( queue[ index ] && queue[ index ].finish ) {
                    queue[ index ].finish.call( this );
                }
            }

            // 删除data.finsh标记
            delete data.finish;
        } );
    }
} );

Animation动画

jQuery动画的核心逻辑就是Animation( elem, properties, options )，立即开始一个动画，把每步动画tick推入全局interval调用堆栈jQuery.timers，返回一个animation对象（也是promise对象，通过上面的stop方法来实现stop、finish的终止动画操作）。

tick函数是对properties中多属性执行动画。jq用面向对象的思想，把每个属性的作为一个运动对象tween，把他们依次放入animation.tweens中（一个堆栈[]），使逻辑更分明。Animation内通过时间换算出百分比percent，然后传入tween.run()来完成计算与设置。

Tween

Tween( elem, options, prop, end, easing )函数的构造和jq一样，另Tween.prototype.init.prototype = Tween.prototype，从而Tween()返回一个实例并能够使用原型方法cur、run。cur负责计算当前属性值，run需传入百分比，然后设置到对应的位置。duration是tweens中的tween公用，每步运动的百分比一致，在Animation的tick函数中处理。

每个属性运动的easing是可以不同的，options.easing可以定义公用样式，但优先级是低于options.specialEasing.prop这样对属性直接指定的，每个属性的easing属性可能不一样。options对象也会被传入，可以通过指定options.step函数，每个属性的tween调用都会执行一次，this指定为elem，传入参数now、tween。

cur和run中使用了Tween.propHooks[prop].set/get钩子。钩子代表例外，Tween.propHooks._default.get/set(tween)是标准的处理。scrollTop/scrollLeft有set钩子。对于通常使用动画的属性，非特殊需求需要钩子的确实几乎没有。

/* #7384 jQuery.Tween === Tween * 生成单个属性的运动对象 * Tween.prototype.init.prototype = Tween.prototype; * jQuery.fx = Tween.prototype.init; ---------------------------------------------------------------------- */   
function Tween( elem, options, prop, end, easing ) {
    return new Tween.prototype.init( elem, options, prop, end, easing );
}
jQuery.Tween = Tween;

Tween.prototype = {
    constructor: Tween,
    // 初始化
    init: function( elem, options, prop, end, easing, unit ) {
        this.elem = elem;
        this.prop = prop;
        // 默认"swing"
        this.easing = easing || jQuery.easing._default;
        this.options = options;
        // 初始化时设置start，now与start相等
        this.start = this.now = this.cur();
        this.end = end;
        // 除了cssNumber中指定的可以为数字的属性，其它默认单位为px
        this.unit = unit || ( jQuery.cssNumber[ prop ] ? "" : "px" );
    },
    // 计算当前样式值
    cur: function() {
        // 首先看是否有钩子
        var hooks = Tween.propHooks[ this.prop ];

        return hooks && hooks.get ?
            // 钩子有get方法
            hooks.get( this ) :
            // 默认处理
            Tween.propHooks._default.get( this );
    },
    run: function( percent ) {
        var eased,
            // 钩子
            hooks = Tween.propHooks[ this.prop ];


        if ( this.options.duration ) {
            // 时间过了百分之x，并不代表需要运动百分之x的距离，调用easing对应的函数
            // 可以在jQuery.easing中扩展运动函数，默认"swing"缓冲
            this.pos = eased = jQuery.easing[ this.easing ](
                percent, this.options.duration * percent, 0, 1, this.options.duration
            );
        } else {
            // duration为0，则percent一定为1，见tick函数中的计算
            this.pos = eased = percent;
        }
        // 计算当前应该运动到的值
        this.now = ( this.end - this.start ) * eased + this.start;

        // options对象可以指定step函数，每个tween调用一次，都会被执行
        if ( this.options.step ) {
            this.options.step.call( this.elem, this.now, this );
        }

        if ( hooks && hooks.set ) {
            // 钩子
            hooks.set( this );
        } else {
            // 默认
            Tween.propHooks._default.set( this );
        }
        return this;
    }
};

Tween.prototype.init.prototype = Tween.prototype;

Tween.propHooks = {
    _default: {
        get: function( tween ) {
            var result;

            // 非dom节点或者属性有值而style上无值的dom节点，均获取属性值返回
            // 注意：此处获取的值是带单位的
            if ( tween.elem.nodeType !== 1 ||
                tween.elem[ tween.prop ] != null && tween.elem.style[ tween.prop ] == null ) {
                return tween.elem[ tween.prop ];
            }

            // 获取起作用的prop属性样式值去掉单位。对于不可parseFloat的字符串则直接返回
            result = jQuery.css( tween.elem, tween.prop, "" );

            // ""、null、undefined、"auto"都按照0返回。此处值无单位
            return !result || result === "auto" ? 0 : result;
        },
        set: function( tween ) {

            // use step hook for back compat - use cssHook if its there - use .style if its
            // available and use plain properties where available

            // 可以自己在jQuery.fx.step中添加钩子，jq库中没有相关处理，是空对象{}
            if ( jQuery.fx.step[ tween.prop ] ) {
                jQuery.fx.step[ tween.prop ]( tween );

            // 凡是执行run的，之前一定执行过cur，调用默认get时，若执行了jQuery.css()则会把属性修正后的字符串缓存在jQuery.cssProps中，这说明elem.style[修正属性]一定存在，至少返回""
            // 在css样式机制的通用钩子cssHooks中的属性，也说明一定可以通过$.style设置
            } else if ( tween.elem.nodeType === 1 &&
                ( tween.elem.style[ jQuery.cssProps[ tween.prop ] ] != null ||
                    jQuery.cssHooks[ tween.prop ] ) ) {
                // 默认获取的样式值（除了属性上直接获取的）不带单位，所以加上unit设置
                jQuery.style( tween.elem, tween.prop, tween.now + tween.unit );

            // 通常对于非节点、get使用钩子的、get直接返回elem上属性的情况，都直接设置在属性上
            } else {
                tween.elem[ tween.prop ] = tween.now;
            }
        }
    }
};

// Support: IE <=9
// Panic based approach to setting things on disconnected nodes

Tween.propHooks.scrollTop = Tween.propHooks.scrollLeft = {
    set: function( tween ) {
        // 节点类型，并且有父节点（根元素也有父节点，为document）
        // 由于直接在属性上获取的值是带单位的，因此直接设置
        if ( tween.elem.nodeType && tween.elem.parentNode ) {
            tween.elem[ tween.prop ] = tween.now;
        }
    }
};

jQuery.easing = {
    // 线性运动
    linear: function( p ) {
        return p;
    },
    // 缓冲
    swing: function( p ) {
        return 0.5 - Math.cos( p * Math.PI ) / 2;
    },
    _default: "swing"
};

jQuery.fx = Tween.prototype.init;

// Back Compat <1.8 extension point
jQuery.fx.step = {};

创建tween对象，使用createTween( value, prop, animation )方法。内部会遍历jQuery.tweeners[“*”]中的函数，默认只有一个函数，调用animation.createTween( prop, value )，核心是调用Tween()。

value支持累加值”+=300”、”+=300px”，普通使用带不带单位均可，因为addjustCSS会对tween.start/end进行处理，同一单位，并且转换为数值，单位存在tween.unit上

/* #7536 createTween * 遍历Animation.tweeners堆栈 ---------------------------------------------------------------------- */   
function createTween( value, prop, animation ) {
    var tween,
        collection = ( Animation.tweeners[ prop ] || [] ).concat( Animation.tweeners[ "*" ] ),
        index = 0,
        length = collection.length;
    for ( ; index < length; index++ ) {
        if ( ( tween = collection[ index ].call( animation, prop, value ) ) ) {

            // 有返回值，则返回，不再遍历
            return tween;
        }
    }
}

/* #7848 jQuery.Animation.tweeners/tweener() * 创建tween对象，并加入animations.tweens堆栈 ---------------------------------------------------------------------- */   
jQuery.Animation = jQuery.extend( Animation, {
    // createTween调用tweeners["*"]
    tweeners: {
        "*": [ function( prop, value ) {
            // Animation中animation的方法，创建一个tween对象，value为end值，可为'+=300'这样的累加值
            var tween = this.createTween( prop, value );
            // adjustCSS可以把tween.end修正为数值（所以我们动画指定单位与否都可以，还可用累加值），把单位放在tween.unit
            // adjustCSS可以把初始值和累加值的单位换算成一样的，正确累加（详细见css样式机制讲解）
            adjustCSS( tween.elem, prop, rcssNum.exec( value ), tween );
            return tween;
        } ]
    },

    // 可以自己通过插件扩展tweeners，props可以把"ss * sd"变成["ss","*","sd"]，对其中每个属性对应的堆栈推入callback在栈顶
    tweener: function( props, callback ) {
        if ( jQuery.isFunction( props ) ) {
            // 参数提前
            callback = props;
            props = [ "*" ];
        } else {
            props = props.match( rnotwhite );
        }

        var prop,
            index = 0,
            length = props.length;

        for ( ; index < length ; index++ ) {
            prop = props[ index ];
            // 若对应属性无堆栈，创建一个空的
            Animation.tweeners[ prop ] = Animation.tweeners[ prop ] || [];
            // 把callback推入栈顶
            Animation.tweeners[ prop ].unshift( callback );
        }
    }
}

Animation

上面介绍到Animation返回一个promise对象，有什么意义呢？在jQuery.speed中封装的options.complete函数（可以调用dequeue），需要动画结束时触发，如果把它绑定在promise对象上，tick函数运动完毕调用resolve，即可触发complete执行下一个doAnimation。

Animation中，在执行动画前需要进行修正（即先删除，再添加修正属性和值）。

1、propFilter( props, animation.opts.specialEasing )：属性修正。属性变为小驼峰，把还会把margin、padding、borderWidth拆分成4个方向

/* #7311 jQuery.cssHooks.margin/padding/border * 钩子，扩展属性为四个方向的值 ---------------------------------------------------------------------- */
// These hooks are used by animate to expand properties
jQuery.each( {
    margin: "",
    padding: "",
    border: "Width"
}, function( prefix, suffix ) {
    jQuery.cssHooks[ prefix + suffix ] = {
        expand: function( value ) {
            var i = 0,
                expanded = {},

                // "5px 3px" -> ['5px', '3px']
                parts = typeof value === "string" ? value.split( " " ) : [ value ];

            for ( ; i < 4; i++ ) {
                // cssExpand = [ "Top", "Right", "Bottom", "Left"]
                // 当parts只有一个值，四个值都为parts[0]
                // 当parts有两个值，Bottom为parts[0=2-2]，left为parts[1=3-2]
                // 当parts有三个值，left为parts[1=3-2]
                expanded[ prefix + cssExpand[ i ] + suffix ] =
                    parts[ i ] || parts[ i - 2 ] || parts[ 0 ];
            }

            // 返回如{marginTop: 1px, marginRight: 2px, marginBottom: 1px, marginLeft: 2px}
            return expanded;
        }
    };

    // css机制中的，border、padding不能为负值，调用setPositiveNumber调整
    if ( !rmargin.test( prefix ) ) {
        jQuery.cssHooks[ prefix + suffix ].set = setPositiveNumber;
    }
} );

/* #7695 propFilter * 属性修正。小驼峰 + expand属性扩展 ---------------------------------------------------------------------- */
function propFilter( props, specialEasing ) {
    var index, name, easing, value, hooks;

    for ( index in props ) {
        // 小驼峰
        name = jQuery.camelCase( index );

        // 此处与easing = value[ 1 ]、specialEasing[ name ] = easing共同修正了specialEasing[ name ]
        // easing优先级：value[ 1 ] > options.specialEasing[ name ] > options.easing
        easing = specialEasing[ name ];
        value = props[ index ];
        if ( jQuery.isArray( value ) ) {
            // 值可为数组，第2项指定easing，优先级最高（高于specialEasing）
            easing = value[ 1 ];
            // 此时，第1项为值
            value = props[ index ] = value[ 0 ];
        }

        // 属性被修正，则修改属性名，属性值不变
        if ( index !== name ) {
            props[ name ] = value;
            delete props[ index ];
        }

        // expand扩展，margin/padding/border扩展为四个方向名值对形式
        hooks = jQuery.cssHooks[ name ];
        if ( hooks && "expand" in hooks ) {
            value = hooks.expand( value );
            // 删除原有margin/padding/border属性
            delete props[ name ];

            // 若已经单独指定了。如"marginRight"，优先级更高，不要修改它
            for ( index in value ) {
                if ( !( index in props ) ) {
                    props[ index ] = value[ index ];
                    specialEasing[ index ] = easing;
                }
            }
        } else {
            specialEasing[ name ] = easing;
        }
    }
}

2、prefilters队列：默认只有defaultPrefilter( elem, props, opts )，有四个用途

• 1、当有非队列动画执行时，会启动计数，只要有非队列动画没结束，”fx”动画队列的queuehook自毁函数无法顺利执行，会等全部结束才执行（用意暂时不明）
• 2、若涉及到height/width的动画，overflow先设置为hidden，动画结束改回。通过给animation绑定alway函数实现（stop(false)会触发reject，也需要改回，所以不绑定done函数）
• 3、对于inline元素涉及到height/width的动画，需要设置为”inline-block”，jq中的设置时display为none的也要变为显示运动（这点挺奇怪，因为默认block的块级如果是none就不会变为显示）。但对于都是toggle/show/hide设置，但是全部都被过滤的，因为没有动画，需要还原为none
• 4、支持属性值为 “toggle”、”show”、”hide”。会被修正为适当的值。

toggle/show/hide动画机制

使用时自觉遵守，一个动画的属性对象里只能出现3者中的1种！！

当带有toggle/show/hide的动画单独执行或异步执行时：

• 1、先判断isHidden，即是否隐藏（display:none）
• 2、隐藏时调用hide无作用（过滤掉），显示时调用show无作用（过滤掉）
• 3、hide表示把元素prop属性的值从now运动到0，运动完后调用jQuery( elem ).hide()变为不可见（原理是内部display设为none），但是要把属性值还原为now。
• 4、show表示把元素prop属性的值从0运动到now，运动前把不可见状态通过jQuery( elem ).show()变为可见
• 5、toggle需要判断当前是否隐藏，当前隐藏调用show，当前显示调用hide

难点在于带有toggle/show/hide的动画同步执行时（同步指的是相同属性有正在发生的动画，不同属性之间按上面规则进行）：

• 1、对于同步中排在第一个调用的，完全按照上面的规则
• 2、从上面规则看出，无论show、hide、toggle，运动过程中都是显示状态（isHidden=false）
• 3、既然运动中都是显示状态，异步时的第2条对同步的动画（非第一个调用的）不约束。
• 4、第一个动画执行前会把属性当前值now缓存到jQuery._data( elem, “fxshow”)，查看是否有该属性缓存值来判断谁是同步的动画（即非第一个）
• 5、对于非第一个的同步动画，不以自身当前位置为参照，把缓存里存的now（即第一个运动前的位置）当做hide的运动起点或show的运动终点
• 6、toggle与show和hide不同，运动到相反而不是特定的状态。当遇到toggle，需要缓存一个要运动到的终点状态，运动结束立即删除（例如：show->hide则缓存hide，没执行完时同步调用toggle会查看缓存值，从而知道当前运动终点是hide->show）
• 7、show、hide判断是否同步必须相同elem的相同属性。toggle判断同步则是针对元素的状态。toggle判断无缓存，表示异步调用中，但是也可能是当前正在show、hide。由于show、hide的运动过程中都会为显示状态（可能同时有很多，既有show也有hide，duration也不同），因此未查找到toggle记录的缓存时，统一是运动到隐藏show->hide。

jQuery小bug：
if ( value === “show” && dataShow && dataShow[ prop ] !== undefined ) { hidden = true; }之所以需要修改hidden，因为同步的show按照show->hide处理，后面的处理逻辑需要判断hidden。但是遍历属性时，对于第一个动画的属性，若为show，变为hidden之前遍历的不被处理，之后的都将从show->hide，与之前不一致。可以增加一个变量来辅助过滤那些属性。

/* #7695 defaultPrefilter * inline修正、toggle/show/hide修正 ---------------------------------------------------------------------- */
function defaultPrefilter( elem, props, opts ) {

    var prop, value, toggle, tween, hooks, oldfire, display, checkDisplay,
        anim = this,
        orig = {},
        style = elem.style,
        // 当前是否隐藏
        hidden = elem.nodeType && isHidden( elem ),
        dataShow = jQuery._data( elem, "fxshow" );

    // 非队列情况，unqueued计数
    if ( !opts.queue ) {
        hooks = jQuery._queueHooks( elem, "fx" );
        if ( hooks.unqueued == null ) {
            hooks.unqueued = 0;
            oldfire = hooks.empty.fire;
            hooks.empty.fire = function() {
                // 非队列动画未完毕，"fx"堆栈和钩子无法自毁
                if ( !hooks.unqueued ) {
                    oldfire();
                }
            };
        }
        hooks.unqueued++;

        // 不仅是done，动画被中断停止在当前位置触发reject时，依然需要消减计数
        anim.always( function() {

            // deferred对象是递延的，再套一层anim.always()与否不影响执行。但套一层会影响执行的顺序，会添加到堆栈末尾
            anim.always( function() {
                hooks.unqueued--;
                if ( !jQuery.queue( elem, "fx" ).length ) {
                    hooks.empty.fire();
                }
            } );
        } );
    }

    // height/width动画对overflow修正 + inline元素修正（长宽需inline-block才有效）
    if ( elem.nodeType === 1 && ( "height" in props || "width" in props ) ) {

        // 记录overflow状态
        opts.overflow = [ style.overflow, style.overflowX, style.overflowY ];

        // Set display property to inline-block for height/width
        // animations on inline elements that are having width/height animated
        display = jQuery.css( elem, "display" );

        // Test default display if display is currently "none"
        checkDisplay = display === "none" ?
            jQuery._data( elem, "olddisplay" ) || defaultDisplay( elem.nodeName ) : display;

        // 当前为inline、或者当前隐藏曾经为inline
        if ( checkDisplay === "inline" && jQuery.css( elem, "float" ) === "none" ) {

            // inline-level elements accept inline-block;
            // block-level elements need to be inline with layout
            if ( !support.inlineBlockNeedsLayout || defaultDisplay( elem.nodeName ) === "inline" ) {
                // 所有的情况都变为inline-block
                // 除了display为none，动画全部是toggle/show/hide属性，但没有一个有效被过滤，无动画，需要还原为none
                style.display = "inline-block";
            } else {
                // 低版本IE
                style.zoom = 1;
            }
        }
    }

    // 把overflow改为hidden
    if ( opts.overflow ) {
        style.overflow = "hidden";
        if ( !support.shrinkWrapBlocks() ) {
            // 运动无论是否成功结束，最后一定要吧overhidden改回来
            anim.always( function() {
                style.overflow = opts.overflow[ 0 ];
                style.overflowX = opts.overflow[ 1 ];
                style.overflowY = opts.overflow[ 2 ];
            } );
        }
    }

    // show/hide pass
    for ( prop in props ) {
        value = props[ prop ];

        // rfxtypes = /^(?:toggle|show|hide)$/
        if ( rfxtypes.exec( value ) ) {
            // 过滤属性，异步时同状态属性动画无作用。有作用的会加入orig[ prop ]
            delete props[ prop ];
            toggle = toggle || value === "toggle";
            if ( value === ( hidden ? "hide" : "show" ) ) {

                // 同步状态调用show，按照hide->show处理。修正显示状态为hidden=true
                if ( value === "show" && dataShow && dataShow[ prop ] !== undefined ) {
                    hidden = true;
                } else {
                    // 过滤掉，异步同状态
                    continue;
                }
            }
            // 记录show的运动终点值，或hide的运动初始值
            orig[ prop ] = dataShow && dataShow[ prop ] || jQuery.style( elem, prop );

        // 有效属性时，不需要结尾的修正
        } else {
            display = undefined;
        }
    }

    // 进入toggle/show/hide属性修正
    if ( !jQuery.isEmptyObject( orig ) ) {
        // 同步时
        if ( dataShow ) {
            // 有同步的toggle
            if ( "hidden" in dataShow ) {
                // 以缓存记录作为当前状态的依据
                hidden = dataShow.hidden;
            }
        } else {
            // elem的第一个动画，为elem加上缓存
            dataShow = jQuery._data( elem, "fxshow", {} );
        }

        // 当前toggle执行完会变为的状态，缓存起来
        if ( toggle ) {
            dataShow.hidden = !hidden;
        }
        // 对于hide->show的元素，先变为显示状态（否则从0到now的运动看不见）
        if ( hidden ) {
            jQuery( elem ).show();
        } else {
            // 对于show->hide的，结束时需要隐藏
            anim.done( function() {
                jQuery( elem ).hide();
            } );
        }
        // 顺利结束则清缓存，并还原位置。中途中断在当前位置的，为了后续动画能还原，保留缓存中的now值
        anim.done( function() {
            var prop;
            jQuery._removeData( elem, "fxshow" );
            // 还原初始位置。对于show->hide的有意义，在运动到0后，变为隐藏状态，并把值变为初始值
            for ( prop in orig ) {
                jQuery.style( elem, prop, orig[ prop ] );
            }
        } );

        // 创建toggle/show/hide属性运动的tween对象
        for ( prop in orig ) {
            // 对于hide->show的，0（第一个动画为0，同步的为当前值）->now（第一个动画为now，同步为缓存）; 对于show->hide，now->0
            tween = createTween( hidden ? dataShow[ prop ] : 0, prop, anim );

            // hide->show，第一个动画初始值调整为0，终点调整为当前值
            if ( !( prop in dataShow ) ) {
                // 第一个动画，无论哪种情况，都要缓存now
                dataShow[ prop ] = tween.start;
                if ( hidden ) {
                    tween.end = tween.start;
                    // 从0开始，宽高从1开始
                    tween.start = prop === "width" || prop === "height" ? 1 : 0;
                }
            }
        }

    // display为none的inline元素，并且没有生效的动画属性，改回none
    } else if ( ( display === "none" ? defaultDisplay( elem.nodeName ) : display ) === "inline" ) {
        style.display = display;
    }
}

最后是核心部分代码，Animation( elem, properties, options )

/* #7732 Animation * 动画核心，返回animation ---------------------------------------------------------------------- */
function Animation( elem, properties, options ) {
    var result,
        stopped,
        index = 0,
        length = Animation.prefilters.length,
        // 用于返回的animation对象对应的promise
        deferred = jQuery.Deferred().always( function() {

            // don't match elem in the :animated selector
            // 运动完或被stop后删除tick.elem的引用
            delete tick.elem;
        } ),
        tick = function() {
            if ( stopped ) {
                return false;
            }
            var currentTime = fxNow || createFxNow(),
                // 还剩多长时间结束，时间过了，则为0，而不是负数
                remaining = Math.max( 0, animation.startTime + animation.duration - currentTime ),

                // 还剩百分之多少时间
                temp = remaining / animation.duration || 0,
                // 经过了百分之多少时间
                percent = 1 - temp,
                index = 0,
                length = animation.tweens.length;

            for ( ; index < length ; index++ ) {
                // 传入百分比，把元素设置到合适位置
                animation.tweens[ index ].run( percent );
            }

            // tick函数每调用一次，options.progress就执行一次
            deferred.notifyWith( elem, [ animation, percent, remaining ] );

            // 返回剩余时间，结束了则返回false（全局jQuery.fx.tick遍历时以此判断动画是否结束，结束了就栈出）
            // 中途中断的不是在这里被resolve，而是在stop中，也有resolve的逻辑(见下方)
            if ( percent < 1 && length ) {
                return remaining;
            } else {
                // 触发成功状态，会调用complete，和defaultPrefilter中绑定的回调还原元素状态
                deferred.resolveWith( elem, [ animation ] );
                return false;
            }
        },
        // 把对象中属性和值copy到deferred.promise中得到animation（一个promise对象）
        animation = deferred.promise( {
            elem: elem,
            props: jQuery.extend( {}, properties ),
            // 深拷贝
            opts: jQuery.extend( true, {
                specialEasing: {},
                easing: jQuery.easing._default
            }, options ),
            originalProperties: properties,
            originalOptions: options,
            startTime: fxNow || createFxNow(),
            duration: options.duration,
            // tween队列
            tweens: [],
            // 创建tween对象的函数，此处end不会被修正为数值（在Animation.tweeners["*"]中完成修正）
            createTween: function( prop, end ) {
                var tween = jQuery.Tween( elem, animation.opts, prop, end,
                        animation.opts.specialEasing[ prop ] || animation.opts.easing );
                // 推入tweens堆栈
                animation.tweens.push( tween );
                return tween;
            },
            // 用于外部来停止动画的函数
            stop: function( gotoEnd ) {
                var index = 0,

                    // 如果在当前位置停止，length变为0
                    length = gotoEnd ? animation.tweens.length : 0;

                // 动画已经被停止，返回
                if ( stopped ) {
                    return this;
                }
                // 标记stopped
                stopped = true;

                // gotoEnd为true，直接run(1)；gotoEnd为false，length被设为0，不进行run
                for ( ; index < length ; index++ ) {
                    // 直接运动到结尾
                    animation.tweens[ index ].run( 1 );
                }

                // true，则触发resolve成功
                if ( gotoEnd ) {
                    deferred.notifyWith( elem, [ animation, 1, 0 ] );
                    deferred.resolveWith( elem, [ animation, gotoEnd ] );
                } else {
                    // 触发失败，不会调用complete，在stop函数停止时，会显示的调用dequeue
                    deferred.rejectWith( elem, [ animation, gotoEnd ] );
                }
                return this;
            }
        } ),
        props = animation.props;

    // 属性修正，expand修正
    propFilter( props, animation.opts.specialEasing );

    for ( ; index < length ; index++ ) {
        // 默认只有一项defalutPrefilter，show/hide/toggle机制处理、inline元素处理。无返回值
        // 这里指的是如果自己通过jQuery.tweener()进行了拓展hook
        result = Animation.prefilters[ index ].call( animation, elem, props, animation.opts );

        // 默认不走这里
        if ( result ) {
            if ( jQuery.isFunction( result.stop ) ) {
                // 与前面提到的"非doAnimation"动画一样，在hook.stop上添加阻止的函数（result.stop）
                jQuery._queueHooks( animation.elem, animation.opts.queue ).stop =
                    // result.stop.bind(result)
                    jQuery.proxy( result.stop, result );
            }
            // 返回，不再生成标准的Animation动画
            return result;
        }
    }

    // 对每个属性，生成tween加入tweens堆栈
    // createTween( props[prop], prop, animation )
    jQuery.map( props, createTween, animation );

    // 可以通过options.start指定动画开始前调用的函数（如果需要的话）
    if ( jQuery.isFunction( animation.opts.start ) ) {
        animation.opts.start.call( elem, animation );
    }

    jQuery.fx.timer(
        // tick函数加入全局interval堆栈
        jQuery.extend( tick, {
            elem: elem,
            anim: animation,
            queue: animation.opts.queue
        } )
    );

    // 链式返回animation，从这里也可以看出options还可以指定progress、done、complete、fail、always函数
    return animation.progress( animation.opts.progress )
        .done( animation.opts.done, animation.opts.complete )
        .fail( animation.opts.fail )
        .always( animation.opts.always );
}

toggle/show/hide

jq中提供了几种便捷的show/hide/toggle动画封装。（原理见上小节”toggle/show/hide动画机制”）

genFx( type, includeWidth )：type可为show/hide/toggle，将转换为属性对象。includeWidth指定是否包含宽度方面动画变化。

genFx( name, true ) -> { height: name, width: name, opacity: name, marginTop/Right/Bottom/Left: name, paddingTop/Right/Bottom/Left: name }
genFx( name ) -> { height: name, marginTop/bottom: name, paddingTop/bottom: name }

/* #7516 genFx * show/hide/toggle动画属性对象转换 ---------------------------------------------------------------------- */
// includeWidth为true，是四向渐变
// includeWidth为false，是上下展开不渐变（透明度不变化）
function genFx( type, includeWidth ) {
    var which,
        attrs = { height: type },
        i = 0;

    // if we include width, step value is 1 to do all cssExpand values,
    // if we don't include width, step value is 2 to skip over Left and Right
    includeWidth = includeWidth ? 1 : 0;
    for ( ; i < 4 ; i += 2 - includeWidth ) {
        // cssExpand = [ "Top", "Right", "Bottom", "Left"]
        // 0 2 对应"Top" "Bottom"，0 1 2 3全部都有
        which = cssExpand[ i ];
        attrs[ "margin" + which ] = attrs[ "padding" + which ] = type;
    }

    if ( includeWidth ) {
        // 透明度，宽度
        attrs.opacity = attrs.width = type;
    }

    return attrs;
}

/* #7921 jQuery.fn.fadeTo * 渐变，从0到to，不可见的也将可见 ---------------------------------------------------------------------- */   
jQuery.fn.fadeTo = function( speed, to, easing, callback ) {

    // 把所有隐藏元素的设为显示，并且透明度设为0（暂时看不见）
    return this.filter( isHidden ).css( "opacity", 0 ).show()

        // 回到this，所有元素opacity运动到to
        .end().animate( { opacity: to }, speed, easing, callback );
};

/* #8044 jQuery.fn.toggle/show/hide * 增强了css机制的jQuery.fn.toggle/show/hide接口，提供了动画功能 ---------------------------------------------------------------------- */
jQuery.each( [ "toggle", "show", "hide" ], function( i, name ) {
    var cssFn = jQuery.fn[ name ];
    jQuery.fn[ name ] = function( speed, easing, callback ) {
        // 无参数，或true、false则按照原有css机制触发
        return speed == null || typeof speed === "boolean" ?
            cssFn.apply( this, arguments ) :
            // 四向渐变
            this.animate( genFx( name, true ), speed, easing, callback );
    };
} );

/* #8044 jQuery.fn.slideDown等 ---------------------------------------------------------------------- */
jQuery.each( {
    slideDown: genFx( "show" ),  // 上下伸展不渐变
    slideUp: genFx( "hide" ),  // 上下回缩不渐变
    slideToggle: genFx( "toggle" ),  // 上下toggle不渐变
    fadeIn: { opacity: "show" },  // 四向渐变展开
    fadeOut: { opacity: "hide" },  // 四向渐变收缩
    fadeToggle: { opacity: "toggle" }  // 四向toggle渐变
}, function( name, props ) {
    jQuery.fn[ name ] = function( speed, easing, callback ) {
        return this.animate( props, speed, easing, callback );
    };
} );