【分享】jQuery animate自定义动画的简单实现

　　在很久很久以前，我写过一次自定义动画的实现，现在看起来已经比较烂了，所以最近又重写了。

其实下面的源码也挺简单。所以我不再详细说明。欢迎高手指正。

 　　如果你有兴趣可以 下载。

　　 不对我应该还有一个问题，比如我使用jQuery 貌似不能正确获得 borderWidth。如果要进行边框宽度的变化无法得到初始值，也就没办法正确执行了。

　　 你可以试试如何可以获得borderWidth正确的值。希望你不吝赐教(我后面自己测试只能同时获取一边的宽度 border-right-width，border-left-width,..)

    /*
     * space 命名空间
     * win window 对象
     * undef undefined
     */
    ;(function(space, win, undef){
    
//        var log = function(msg){
//            console.log(msg)
//        }
        
        /*
         * 缓动算法
         */
        var tween = {
            eain:function(t, b, c, d){ return - c * (t /= d) * (t - 2) + b}
        }
        
        /*
         * 获取Element对象css属性值 
         */
        var css = window.getComputedStyle ?
            function(a, b, c){
                if( c == undefined){
                    b = b.replace(/([A-Z])/g, "-$1");
                    b = b.toLowerCase();
                    return window.getComputedStyle(a, null).getPropertyValue(b);
                }else{
                    a.style[b] = c;
                }
            }
            :function(a, b, c){
                if( c == undefined){
                    if(b == "opacity"){
                        return a.style.filter.indexOf("opacity=") >= 0 ? parseFloat(a.style.filter.match(/opacity=([^)]*)/)[1]) / 100 : "1";
                    }else { return a.currentStyle[b] == "auto" ? 0 : a.currentStyle[b];}
                }else{
                    if(b == "opacity"){
                        a.style.filter = (a.filter || "").replace(/alpha\([^)]*\)/, "") + "alpha(opacity=" + c * 100 + ")";
                    }else{ a.style[b] = c }
                }
            }
        
        
        var $ = function(id){
            return typeof id == 'string' ? document.getElementById(id) : id;
        }
        
        /*
         *  用于规范 需要变化对象的 key/vlaue
         */
        var getJsonMap = function(jsonMap){
            
            var arr = [];
            var a = null;
            for(a in jsonMap){
                var json = {};
                var test = String(jsonMap[a]).match(/(\d+)($|([a-z]+))/);
                    json.interval = null;
                    json.style = a;
                    json.val = typeof jsonMap[a] == "number" ? jsonMap[a] : parseFloat(test[1]);
                    json.px = test[3];
                    arr[arr.length] = json;
            }
            
            return arr;
            
        }

        /*
         * animate 开始
         * id String|Element
         * jsonMap json对象
         * time 时长
         * callBack 回调函数，将会接收当前element对象作为第一个参数
         */
        var Animate = function(id, jsonMap, time, callBack){
            
            if( !(this instanceof win[space]) ){
                return new Animate(id, jsonMap);
            }
            
            this.init(id, jsonMap, time, callBack);
            
            
        }
        
        Animate.prototype = {
            init:function(id, jsonMap, time, callBack){
                this.config = {
                    ele:$(id),
                    delay:0,
                    jsonMap:getJsonMap(jsonMap),
                    time: time || 400,
                    callBack: callBack === undef ? typeof time == "function" ? time : undef : callBack
                }
                return this;
            },
            /*
             * 主要实现方法
             */
            go:function(elem, style, val, callBack, time, px, callBack){
                
                px = px || '';
                /*
                 * 可能无法得到元素的真实值，
                 * 比如可能得到 auto  空值等，都会引发BUG(只是一些特殊的属性 才会返回这些值)
                 * 这里的零时解决办法是 默认为0
                 */
                var b = parseFloat( css(elem, style) ) || 0;
                
                val = val - b;
                var st = new Date().getTime();
                var a = setInterval(function(){
                    var t = new Date().getTime() - st;
                    if( t > time){t = time;clearInterval(a);callBack&&callBack(elem);}
                    css(elem, style, parseFloat(tween.eain(t, b, val, time))+ px, 2);
                }, 10);
                return a;
            },
            /*
             * 对外公开的 play() 开始动画
             */
            play:function(){
                
                var self = this, config = self.config;
                
                if(config.delay){
                    setTimeout(function(){self.play()}, config.delay);
                    config.delay = 0;
                    return self;
                }
                
                var elem = config.ele;
                var callBack = config.callBack;
                var time = config.time;
                var i = 0;
                var j = 0;
                var len = config.jsonMap.length;
                
                var systemCallBack = function(){
                    if(++j == len){
                        callBack && callBack(elem);
                    };
                }

                for(; i<len; i++){
                    config.jsonMap[i].interval = self.go(elem, config.jsonMap[i].style, config.jsonMap[i].val, callBack, time, config.jsonMap[i].px, systemCallBack);
                }
                
                
                return self;
            },
            
            /*
             * 停止动画
             */
            stop:function(k){
                
                var self = this, config = self.config;
                var i = 0;
                var len  = config.jsonMap.length;
                
                for(; i<len; i++){
                    
                    if(config.jsonMap[i].interval){
                        clearTimeout(config.jsonMap[i].interval);
                    }
                    
                    if(k == true){
                        config.ele.style[config.jsonMap[i].style] = config.jsonMap[i].val + config.jsonMap[i].px;
                    }
                }
                
                return self;
            },
            /*
             * 延迟队列
             */
            delay:function(time){
                this.config.delay = time;
                return this;
            },
            
            /*
             * 级联调用，貌似现在还不太好用
             */
            animate:function(jsonMap, time, callBack){
                //this.delay(null);
                return this.init(this.config.ele, jsonMap, time, callBack);
            }
        }
        
        win[space] = Animate;
        
    })("animate", window);

调用

    var a = new animate('test', {"width":"200px"}, 300, function(aa){
        animate(aa, {"height":"100px"}).delay(300).play();
    }).delay(300).play();
    
    var b = new animate('test1', {"width":"300px"}).delay(300).play();
    
    var c = new animate('test2', {"width":"400px"}).delay(300).play();