[web开发-缓动动画]新加入一个陌生的大家庭,就随便写点东西吧....

**缓动动画函数封装**
/**
*只适用于px单位的属性,如果要改变其他属性,使用if-else增加判断条件
*@param ele:要移动的元素
*@param obj:如果这个元素有多个属性要修改,就可以用对象储存
*@param fn:回调函数,如果调用者在这个动画完成之后还需要做其他事情,就可以传这个实参,不传就不执行
*/
function (ele,obj,fn){
    //1.无条件清除上一个定时器
    clearInterval(ele.timeID);
    //2.创建一个新的定时器
    ele.timeID = setInterval(function (){
        //3.生成一个开关,当所有属性都到达终点才清除定时器(开关思想)
        //假设这次全部到达,然后验证这次假设是否成立
        var isAllOk = true;
        //4.遍历obj
        for(var key in obj){
            var attr = key;  //将属性名存入attr中 方便下面代码阅读
            var target = obj[key];  //同理
            //5.获取当前属性 转number计算
            var current = parseInt(getStyle(ele,attr)); //调用下方函数
            //6.计算移动距离
            var step = (target - current) / 10;
            //7.取整 移动方向不同,取整条件也不同
            step = step>0?Math.ceil(step):Math.floor(step);
            //8.开始移动
            current += step;
            ele.style[arrt] = current + 'px';
            //9.验证假设 只有有一个没有到达终点,假设就不成立
            if(target != current){
                isAllOk = false;
            }
        }
        //假设成立则停止定时器
        if(isAllOk){
            clearInterval(ele.timeID);
            //如果用户传了回调函数则执行这个函数,不是回调函数或者没有传则不执行
            if(typeof fn == 'function'){
                fn();
            }
        }
    },50)
}

**获取元素样式属性的浏览器兼容性函数封装**
function getStyle(ele,attr){
    if(window.getComputedStyle(ele,null)){  // 说明不是ie8浏览器
        return window.getComputedStyle(ele.null)[attr]
    }else{  // ie8浏览器
        return ele.currentStyle[attr]
    }
}