缓动动画封装

<script>
    /**
 * 缓动动画
 * @param obj
 * @param json
 * @param fn
 */
function buffer(obj, json, fn) {
    // 1.1 清除定时器
    clearInterval(obj.timer);

    // 1.2 设置定时器
    var begin = 0, target = 0, speed = 0;
    obj.timer = setInterval(function () {
        // 1.3.0 旗帜
        var flag = true;
        for(var k in json){
            // 1.3 获取初始值
            if("opacity" === k){ // 透明度
                begin =  Math.round(parseFloat(getCSSAttrValue(obj, k)) * 100) || 100;//透明度的取值比较特殊，
//它不会超过1，所以用float
                //后面又乘100是为了高精度处理，
//并且可以和其他情况通过一样的操作获得相应的speed等参数
                target = parseInt(json[k] * 100);
            }else { // 其他情况
                begin = parseInt(getCSSAttrValue(obj, k)) || 0;
                target = parseInt(json[k]);
            }

            // 1.4 求出步长
            speed = (target - begin) * 0.2;//缓动函数

            // 1.5 判断是否向上取整
            speed = (target > begin) ? Math.ceil(speed) : Math.floor(speed);

            // 1.6 动起来
            if("opacity" === k){ // 透明度
                // w3c的浏览器
                obj.style.opacity = (begin + speed) / 100;
                // ie 浏览器
                obj.style.filter = 'alpha(opacity:' + (begin + speed) +')';
            }else {
                obj.style[k] = begin + speed + "px";
            }

            // 1.5 判断
            if(begin !== target){
                flag = false;
            }
        }

        // 1.3 清除定时器
        if(flag){
            clearInterval(obj.timer);

            //console.log(fn);

            // 判断有没有回调函数
            if(fn){
                fn();
            }
        }
    }, 20);
}
</script>

这个函数最好写在一个js文件里面，这样就可以方便去调用，这里面需要传递三个参数，一个是对象，就是要做缓动动画的元素，还有一个就是一个json，由于通过json传递过来的参数是字符串，通过obj.syle.k是无法改变它的样式的，必须通过obj.style[k]的方式才可以改变样式。

box.style.width，box.style.height，box.style.top，box.style.left 得到带有单位的属性值，比如：200px； 但是，点语法存在一个很致命的问题，跟在style后面的属性不能由外面传入。

所以需要利用 [] 访问属性 元素.style[“属性”];

  这种语法的好处就是可以动态的传递参数作为属性

getCSSAttrValue(obj, k)是一个封装好的函数：

/**
 * 获取css的样式值
 * @param {object}obj
 * @param attr
 * @returns {*}
 */
function getCSSAttrValue(obj, attr) {
    if(obj.currentStyle){ // IE 和 opera
        return obj.currentStyle[attr];
    }else {
        return window.getComputedStyle(obj, null)[attr];
    }
}

回调函数就是为了做多个连续动画而准备的，如果需要可以传递函数进来。

例如：

buffer(bottom, {height: 0}, function () {
                buffer(box, {width: 0}, function () {
                    close.style.display = "none";
                });
            });

缓动动画其实就是个纸老虎，没那么难！！！