动画函数测试封装

  //把 任意对象 的 任意数值属性 改变为 任意的目标值

    function animate(obj, json, fn) {

        clearInterval(obj.timer);

        obj.timer = setInterval(function () {

            var flag = true;

            for (var k in json) {

                if (k === "opacity") {//opacity要特殊处理

                    //opacity没有单位 参与运算自动转换成数值 所以不用parsetInt

                    //取值范围 0-1 0.1 0.33 33 为了让以前的计算公式生效 要扩大100倍

                    var leader = getStyle(obj, k) * 100;

                    var target = json[k] * 100;

                    var step = (target - leader) / 10;

                    step = step > 0 ? Math.ceil(step) : Math.floor(step);

                    leader = leader + step;

                    obj.style[k] = leader / 100;//opacity没有单位

                } else if (k === "zIndex") {

                    obj.style.zIndex = json[k];//层级不需要渐变 直接设置即可

                } else {

                    var leader = parseInt(getStyle(obj, k)) || 0;

                    var target = json[k];

                    var step = (target - leader) / 10;

                    step = step > 0 ? Math.ceil(step) : Math.floor(step);

                    leader = leader + step;

                    obj.style[k] = leader + "px";

                }

                if (leader != target) {

                    flag = false;

                }

            }

            if (flag) {

                clearInterval(obj.timer);

                if (fn) {

                    fn();

                }

            }

        }, 15);

    }

    //全部属性都到达目标值才能清空

    function getStyle(obj, attr) {

        if (window.getComputedStyle) {

            return window.getComputedStyle(obj, null)[attr];

        } else {

            return obj.currentStyle[attr];

        }

    }