留作备份，作为承诺，它已为框架实现对css3 transform2D的支持，尽管IE下对位移不那么完美。

它完美地实现了jquery动画模块95%的功能，而且天然支持颜色渐变，支持动画回放。

//=========================================// 动画模块v3//==========================================$.define("fx", "css",function(){    //$.log("已加载fx模块");    var types = {        color:/color/i,        transform:/rotate|scaleX|scaleY|translateX|translateY/i,        scroll:/scroll/i,        _default:/fontSize|fontWeight|opacity|width|height|top$|bottom$|left$|right$/i    },    rfxnum = /^([+\-/\*]=)?([\d+.\-]+)([a-z%]*)$/i;    var adapter = $.fxAdapter = {        _default:{            get:function(el, prop) {                return $.css(el,prop);            },            tween :function(form,change,name,per) {                var a = (form + change * $.easing[name](per)).toFixed(3);                return isNaN(a) ? 0 : a;            }        },        type: function (attr){//  用于取得适配器的类型            for(var i in types){                if(types[i].test(attr)){                    return i;                }            }            return "_default";        }    }    var tween = adapter._default.tween;    $.mix(adapter,{        scroll : {            get: function(el, prop){                return el[prop];            },            tween: tween        },        transform:{            get: function(el, prop){                return $.transform(el)[prop]            },            set:function(el,t2d,isEnd,per){                var obj = {}                for(var name in t2d){                    obj[name] = isEnd ? t2d[name][1] : tween(t2d[name][0],t2d[name][2],t2d[name][3],per);                }                $.transform(el,obj);            }        },        color : {            get:function(el,prop){                return  $.css(el,prop);            },            tween:function(f0,f1,f2,c0,c1,c2,name,per,i){                var delta = $.easing[name](per), ret = [];                for(i = 0;i < 3;i++){                    ret[i] = Math.max(Math.min((arguments[i] +arguments[i+3] * delta)|0, 255), 0);                }                return "rgb("+ret+")";            }        }    } );    //中央定时器，可以添加新节点到中央列队，然后通过setInterval方法不断调用nextTick处理所有节点的动画    function heartbeat( node) {        heartbeat.nodes.push( node);        if (heartbeat.id === null) {            heartbeat.id = setInterval(nextTick, 13);//开始心跳        }        return true;    }    heartbeat.nodes = []; //中央列队    heartbeat.id = null;  //原始的setInterval id    //驱动中央列队的元素节点执行它们的动画，如果执行完毕就把它们从列队中剔除，如果列队为空则中止心跳    function nextTick() {        var nodes = heartbeat.nodes, i = 0, n = nodes.length;        for (; i < n; i++) {            if ( animate(nodes[i]) === false) {//在这里操作元素的样式或属性进行渐变                nodes.splice(i, 1);                i -= 1;                n -= 1;            }        }        nodes.length || (clearInterval(heartbeat.id), heartbeat.id = null);    }    var keyworks = $.oneObject("before,frame,after,easing,revert,record");    //处理特效的入口函数,用于将第二个参数，拆分为两个对象props与config，然后再为每个匹配的元素指定一个双向列队对象linked    //linked对象包含两个列队，每个列队装载着不同的特效对象    $.fn.fx = function( duration, hash ){        var props = hash ||{}, config = {}, p        if(typeof duration === "function"){            props.after = duration;            duration = null;        }        for( var name in props){            p = $.cssName(name) || name;            if( name != p ){                props[ p ] = props[ name ];                delete props[ name ];            }else if(  keyworks[name] ){                config[ name ] =  props[ name ]                 delete props[ name ];            }        }        var easing = (config.easing || "swing").toLowerCase() ;        config.easing = $.easing[ easing ] ? easing : "swing";        config.duration = duration || 500;        config.method = "noop";        return this.each(function(node){            var linked = $._data(node,"fx") || $._data( node,"fx",{                positive: [], //正向列队                negative: [], //负向列队                run: false            });            linked.positive.push({//fx对象                startTime:  0,//timestamp                config:   $.mix({}, config),//各种配置                props:    $.mix({}, props)//用于渐变的属性            });            if(!linked.run){                linked.run = heartbeat( node);            }        });    }    function animate( node ) {//linked对象包含两个列队（positive与negative）        var linked = $._data( node,"fx") ;        if(!linked){//如果在动画过程中，元素被移除掉            return false;        }        var fx = linked.positive[0],  now, isEnd, mix;        if( isFinite( fx ) ){//如果此时调用了delay方法，fx肯定是整型            setTimeout(function(){                linked.positive.shift();                linked.run = heartbeat( node);            },fx)            return (fx.run = false)        }        if (!fx) { //这里应该用正向列队的长度做判定            linked.run = false;        } else {            var config = fx.config, props = fx.props;            if (fx.startTime) { // 如果已设置开始时间，说明动画已开始                now = +new Date;                switch(linked.stopCode){//如果此时调用了stop方法                    case 0:                        fx.render = $.noop;//中断当前动画，继续下一个动画                        break;                    case 1:                        fx.gotoEnd = true;//立即跳到最后一帧，继续下一个动画                        break;                    case 2:                        linked.positive  = linked.negative = [];//清空该元素的所有动画                        break;                    case 3:                        for(var ii=0, _fx; _fx= linked.positive[ii++]; ){                            _fx.gotoEnd = true;//立即完成该元素的所有动画                        }                        break;                }                delete linked.stopCode;                isEnd = fx.gotoEnd || (now >= fx.startTime + config.duration);                //node, 是否结束, 进度                fx.render(node, isEnd, (now - fx.startTime)/config.duration, $); // 处理渐变                if(fx.render === $.noop) { //立即开始下一个动画                    linked.positive.shift();                }else{                    if( (mix = config.frame ) && !isEnd ){                        mix.call(node, node, props, fx ) ;                    }                }                if (isEnd) {//如果动画结束，则做还原，倒带，跳出列队等相关操作                    if(config.method == "hide"){                        for(var i in config.orig){//还原为初始状态                            $.css( node, i, config.orig[i] )                        }                    }                    linked.positive.shift(); //去掉播放完的动画                    mix = config.after;                    mix &&  mix.call( node, node, fx.props, fx ) ;                    if (config.revert && linked.negative.length) {                        //开始倒带,将负向列队的动画加入播放列表中                        [].unshift.apply(linked.positive, linked.negative.reverse())                        linked.negative = []; // 清空负向列队                    }                    if (!linked.positive.length) {                        linked.run = false;                    }                }            } else { // 初始化动画                fx.render = fxBuilder(node, linked, props, config); // 生成补间动画函数                mix = config.before                mix && (mix.call( node, node, fx.props, fx ), config.before = 0);                $[ config.method ].call(node, node, props, fx );//供show, hide 方法调用                fx.startTime = now = +new Date;            }        }        return linked.run; // 调用 clearInterval方法，中止定时器    }    function visible(node) {        return  $.css(node, "display") !== 'none';    }    function fxBuilder( node, linked, props, config ){        var ret = "var style = node.style,t2d = {}, adapter = $.fxAdapter, _defaultTween = adapter._default.tween;",        revertConfig = $.Object.merge( {}, config ),        transfromChanged = 0,        revertProps = {};        var orig = config.orig = {}, parts, to, from, val, unit, easing, op, type        for(var name in props){            val = props[name] //取得结束值            if( val == null){                continue;            }            easing = config.easing;//公共缓动公式            type = $.fxAdapter.type(name);            from = $.fxAdapter[ type ].get(node,name);            //用于分解属性包中的样式或属性,变成可以计算的因子            if( val === "show" || (val === "toggle" && !visible(node))){                val = $._data(node,"old"+name) || from;                config.method = "show";                from = 0;            }else if(val === "hide" || val === "toggle" ){//hide                orig[name] =  $._data(node,"old"+name,from);                config.method = "hide";                val = 0;            }else if(typeof val === "object" && isFinite(val.length)){// array                parts = val;                val = parts[0];//取得第一个值                easing = parts[1] || easing;//取得第二个值或默认值            }            //开始分解结束值to            if(type != "color" ){//如果不是颜色，则需判定其有没有单位以及起止值单位不一致的情况                from = from == "auto" ? 0 : parseFloat(from)//确保from为数字                if( (parts = rfxnum.exec( val )) ){                    to = parseFloat( parts[2] ),//确保to为数字                    unit = $.cssNumber[ name ] ? "" : (parts[3] || "px");                    if(parts[1]){                        op = parts[1].charAt(0);                        if (unit && unit !== "px" && (op == "+" || op == "-")  ) {                            $.css(node, name, (to || 1) + unit);                            from = ((to || 1) / parseFloat($.css(node,name))) * from;                            $.css( node, name, from + unit);                        }                        if(op){//处理+=,-= \= *=                            to = eval(from+op+to);                        }                    }                    var change = to - from;                }else{                    continue;                }            }else{                from = color2array(from);                to   = color2array(val);                change = to.map(function(end,i){                    return end - from[i]                });            }            if(from +"" === to +"" ){//不处理初止值都一样的样式与属性                continue;            }            var hash = {                name: name,                to: to,                from: from ,                change: change,                type: type,                easing: easing,                unit: unit            };            switch( type ){                case "_default":                    if(name == "opacity" && !$.support.cssOpacity){                        ret += $.format('$.css(node,"opacity", (isEnd ? #{to} : _defaultTween(#{from},#{change},"#{easing}", per )));;', hash);                    }else{                        ret += $.format('style.#{name} = ((isEnd ? #{to} : _defaultTween(#{from}, #{change},"#{easing}",per )))+"#{unit}";', hash);                    }                    break;                case "scroll":                    ret += $.format('node.#{name} = (isEnd ? #{to}: _defaultTween(#{from}, #{change},"#{easing}",per ));',hash);                    break;                case "color":                    ret += $.format('style.#{name} = (isEnd ? "rgb(#{to})" : adapter.#{type}.tween(#{from}, #{change},"#{easing}",per));', hash);                    break;                case "transform":                    transfromChanged++                    ret +=  $.format('t2d.#{name} = [#{from},#{to}, #{change},"#{easing}"];',hash);                    break            }            if(type == "color"){                from = "rgb("+from.join(",")+")"            }            revertProps[ name ] = [ from , easing ];        }               if( transfromChanged ){            ret += 'adapter.transform.set(node, t2d, isEnd, per);'        }        if ( config.record || config.revert ) {            delete revertConfig.record;            delete revertConfig.revert;            linked.negative.push({                startTime: 0,                reverting: 1,//标识正在倒带                config: revertConfig,                props: revertProps            });        }        //生成补间函数        return Function( "node,isEnd,per,$",ret );    }    $.easing = {        linear: function( pos ) {            return pos;        },        swing: function( pos ) {            return (-Math.cos(pos*Math.PI)/2) + 0.5;        }    }    var colorMap = {        "black":[0,0,0],        "silver":[192,192,192],        "gray":[128,128,128],        "white":[255,255,255],        "maroon":[128,0,0],        "red":[255,0,0],        "purple":[128,0,128],        "fuchsia":[255,0,255],        "green":[0,128,0],        "lime":[0,255,0],        "olive":[128,128,0],        "yellow":[255,255,0],        "navy":[0,0,128],        "blue":[0,0,255],        "teal":[0,128,128],        "aqua":[0,255,255]    };    var sandbox,sandboxDoc;    function callSandbox(parent,callback){        if ( !sandbox ) {            sandbox = document.createElement( "iframe" );            sandbox.frameBorder = sandbox.width = sandbox.height = 0;        }        parent.appendChild(sandbox);        if ( !sandboxDoc || !sandbox.createElement ) {            sandboxDoc = ( sandbox.contentWindow || sandbox.contentDocument ).document;            sandboxDoc.write( ( document.compatMode === "CSS1Compat" ? "" : "" ) + "" );            sandboxDoc.close();        }        callback(sandboxDoc);        parent.removeChild(sandbox);    }    function parseColor(color) {        var value;        callSandbox( $.html, function(doc){            var range = doc.body.createTextRange();            doc.body.style.color = color;            value = range.queryCommandValue("ForeColor");        });        return [value & 0xff, (value & 0xff00) >> 8,  (value & 0xff0000) >> 16];    }    function color2array(val) {//将字符串变成数组        var color = val.toLowerCase(),ret = [];        if (colorMap[color]) {            return colorMap[color];        }        if (color.indexOf("rgb") == 0) {            var match = color.match(/(\d+%?)/g),            factor = match[0].indexOf("%") !== -1 ? 2.55 : 1            return (colorMap[color] = [ parseInt(match[0]) * factor , parseInt(match[1]) * factor, parseInt(match[2]) * factor ]);        } else if (color.charAt(0) == '#') {            if (color.length == 4)                color = color.replace(/([^#])/g, '$1$1');            color.replace(/\w{2}/g,function(a){                ret.push( parseInt(a, 16))            });            return (colorMap[color] = ret);        }        if(window.VBArray){            return (colorMap[color] = parseColor(color));        }        return colorMap.white;    }    var cacheDisplay = $.oneObject("a,abbr,b,span,strong,em,font,i,img,kbd","inline");    var blocks = $.oneObject("div,h1,h2,h3,h4,h5,h6,section,p","block");    $.mix(cacheDisplay ,blocks);    function parseDisplay( nodeName ) {        if ( !cacheDisplay[ nodeName ] ) {            var body = document.body, elem = document.createElement(nodeName);            body.appendChild(elem)            var display = $.css( elem, "display" );            body.removeChild(elem);            // 先尝试连结到当前DOM树去取，但如果此元素的默认样式被污染了，就使用iframe去取            if ( display === "none" || display === "" ) {                callSandbox(body, function(doc){                    elem = doc.createElement( nodeName );                    doc.body.appendChild( elem );                    display = $.css( elem, "display" );                });            }            cacheDisplay[ nodeName ] = display;        }        return cacheDisplay[ nodeName ];    }    //show 开始时计算其width1 height1 保存原来的width height display改为inline-block或block overflow处理 赋值（width1，height1）    //hide 保存原来的width height 赋值为(0,0) overflow处理 结束时display改为none;    //toggle 开始时判定其是否隐藏，使用再决定使用何种策略    $.mix( $, {        fx:  function ( nodes, duration, hash, effects ){            nodes = nodes.mass ? nodes : $(nodes);            var props =  hash ||  duration ;            props = typeof props === "object" ? props : {}            if(typeof duration === "function"){// fx(obj fn)                hash = duration;               // fx(obj, 500, fn)                duration = 500;            }            if(typeof hash === "function"){   //  fx(obj, num, fn)                props.after = hash;           //  fx(obj, num, {after: fn})            }            if(effects){                for(var i in effects){                    if(typeof effects[i] === "function"){                        var old = props[i];                        props[i] = function(node, props, fx ){                            effects[i].call(node, node, props, fx);                            if(typeof old === "function"){                                old.call(node, node, props, fx);                            }                        }                    }else{                        props[i] = effects[i]                    }                }            }            return nodes.fx(duration, props);        },        show: function(node, props){            if(node.nodeType == 1 && !visible(node)) {                var old =  $._data(node, "olddisplay"),                _default = parseDisplay(node.nodeName),                display = node.style.display = (old || _default);                $._data(node, "olddisplay", display);                //  node.style.visibility = "visible";                if(props && ("width" in props || "height" in props)){//如果是缩放操作                    //修正内联元素的display为inline-block，以让其可以进行width/height的动画渐变                    if ( display === "inline" && $.css( node, "float" ) === "none" ) {                        if ( !$.support.inlineBlockNeedsLayout ) {//w3c                            node.style.display = "inline-block";                        } else {//IE                            if ( _default === "inline" ) {                                node.style.display = "inline-block";                            }else {                                node.style.display = "inline";                                node.style.zoom = 1;                            }                        }                    }                }            }        },        hide: function(node, props, fx){            if(node.nodeType == 1 && visible(node)){                var config = fx && fx.config;                var display = $.css( node, "display" );                if ( display !== "none" && !$._data( node, "olddisplay" ) ) {                    $._data( node, "olddisplay", display );                }                if( config ){//缩小                    if("width" in props || "height" in props){//如果是缩放操作                        //确保内容不会溢出,记录原来的overflow属性，因为IE在改变overflowX与overflowY时，overflow不会发生改变                        config.overflow = [ node.style.overflow, node.style.overflowX, node.style.overflowY ];                        node.style.overflow = "hidden";                    }                    var after = config.after;                    config.after = function( node, fx, props ){                        node.style.display = "none";                        //   node.style.visibility = "hidden";                        if ( config.overflow != null && !$.support.keepSize  ) {                            [ "", "X", "Y" ].forEach(function (postfix,index) {                                node.style[ "overflow" + postfix ] = config.overflow[index]                            });                        }                        if(typeof after == "function"){                            after.call( node, node, props, fx );                        }                    };                }else{                    node.style.display = "none";                }            }        },         toggle: function( node ){            $[ visible(node) ? "hide" : "show" ]( node );        }    });    //如果clearQueue为true，是否清空列队    //如果jumpToEnd为true，是否跳到此动画最后一帧    $.fn.stop = function( clearQueue, jumpToEnd ){        clearQueue = clearQueue ? "1" : ""        jumpToEnd = jumpToEnd ? "1" : "0"        var stopCode = parseInt( clearQueue+jumpToEnd,2 );//返回0 1 2 3        return this.each(function(node){            var linked = $._data( node,"fx");            if(linked && linked.run){                linked.stopCode = stopCode;            }        });    }    // 0 1    $.fn.delay = function(ms){        return this.each(function(node){            var linked = $._data(node,"fx") || $._data( node,"fx",{                positive:[], //正向列队                negative:  [], //负向列队                run: false //            });            linked.positive.push(ms);        });    }    var fxAttrs = [    [ "height", "marginTop", "marginBottom", "paddingTop", "paddingBottom" ],    [ "width", "marginLeft", "marginRight", "paddingLeft", "paddingRight" ],    ["opacity"]    ]    function genFx( type, num ) {//生成属性包        var obj = {};        fxAttrs.concat.apply([], fxAttrs.slice(0,num)).forEach(function(name) {            obj[ name ] = type;        });        return obj;    }    var effects = {        slideDown: genFx( "show", 1 ),        slideUp: genFx( "hide", 1 ),        slideToggle: genFx( "toggle", 1 ),        fadeIn: {            opacity: "show"        },        fadeOut: {            opacity: "hide"        },        fadeToggle: {            opacity: "toggle"        }    }    Object.keys(effects).forEach(function( method ){        $.fn[ method ] = function( duration, hash ){            return $.fx( this, duration, hash, effects[method] );        }    });      "show,hide".replace( $.rword, function( method ){        $.fn[ method ] = function(duration, hash){            if(!arguments.length){                return this.each(function(){                    $[ method ]( this );                })            }else{                             return $.fx( this, duration, hash, genFx( method , 3) );            }        }    })    var _toggle = $.fn.toggle;    $.fn.toggle = function(duration,hash){        if(!arguments.length){            return this.each(function(node) {                $.toggle( node );            });        }else if(typeof duration === "function" && typeof duration === "function" ){            return _toggle.apply(this,arguments)        }else{            return $.fx(this, duration, hash, genFx("toggle", 3));        }    }    function beforePuff( node, props, fx ) {        var position = $.css(node,"position"),        width = $.css(node,"width"),        height = $.css(node,"height"),        left = $.css(node,"left"),        top = $.css(node,"top");        node.style.position = "relative";        $.mix(props, {            width: "*=1.5",            height: "*=1.5",            opacity: "hide",            left: "-=" + parseInt(width) * 0.25,            top: "-=" + parseInt(height) * 0.25        });        var after = fx.config.after;        fx.config.after = function( node, props, fx ){            node.style.position = position;            node.style.width = width;            node.style.height = height;            node.style.left = left;            node.style.top = top;            if(typeof after === "function"){                after.call( node, node, props, fx );            }        }    }    //扩大1.5倍并淡去    $.fn.puff = function(duration, hash) {        return $.fx( this, duration, hash, {            before:beforePuff        });    }});//2011.10.10 改进$.fn.stop//2011.10.20 改进所有特效函数，让传参更加灵活//2011.10.21 改进内部的normalizer函数//2012.2.19 normalizer暴露为$.fx 改进绑定回调的机制