原生js实现jquery函数animate()动画效果

转载地址：http://blog.csdn.net/zerlinda_c/article/details/50353908

//obj,函数的对象
//json,数值对，形式{attr：”value”, attr: “value”}，在这里是指要动画对象的运动属性，（运动后的位置，不是偏移量）
//interval,每执行一次改变的间隔，这里改变的是对象是属性值
//sp,值变换的速度，使动画具有缓冲效果，而不只是匀速不变（sp为1）的
//fn,回调函数，执行完动画之后的行为
function animate(obj, json, interval, sp, fn) {
    clearInterval(obj.timer);
    function getStyle(obj, arr) {
        if(obj.currentStyle){
            return obj.currentStyle[arr];    //针对ie
        } else {
            return document.defaultView.getComputedStyle(obj, null)[arr]; 
        }
    }
    obj.timer = setInterval(function(){
        //j ++;
        var flag = true;
        for(var arr in json) {
            var icur = 0;
            if(arr == "opacity") {
                icur = Math.round(parseFloat(getStyle(obj, arr))*100);
            } else {
                icur = parseInt(getStyle(obj, arr));
            }
            var speed = (json[arr] - icur) * sp;
            speed = speed > 0 ? Math.ceil(speed): Math.floor(speed);
            if(icur != json[arr]){
                flag = false;
            } 
            if(arr == "opacity"){
                obj.style.filter = "alpha(opacity : '+(icur + speed)+' )";
                obj.style.opacity = (icur + speed)/100;
            }else {
                obj.style[arr] = icur + speed + "px";
            }
            //console.log(j + "," + arr +":"+ flag);
        }

        if(flag){
            clearInterval(obj.timer);
            if(fn){
                fn();
            }
        }
    },interval);
}

调用方式：

    var move = document.getElementById("move").getElementsByTagName("li");
    for(var i = 0; i < move.length; i ++){
        move[i].onmouseover = function(){
            var _this = this;
            animate(_this, {width: 500, height: 200},10, 0.01, function(){
                animate(_this, {width: 300, height: 200},10, 0.01);
            });

        }
    }