滑块运动 — 到目标位置宽度缓慢展开

点击按钮，方块运动到右边目标位置，然后宽度展开；
也可以设置高度展开参考滑块运动 — 到目标位置高度展开；

html：

<input type="button" value="运动" id="btn">   
<div id="div1"></div>

css：

#div1 {
    width: 50px;
    height: 50px;
    background-color: red;
    position: absolute;
    top: 50px;
    left: 30px;         
}

js：

function $(id){return document.getElementById(id);}            

    function doMove(obj,attr,dir,target,endFn){//参数分别代表：元素、上下左右方向运动、方向（正反方向）、目标位置、回调函数
        // 判断是正方向运动还是反方向运动，这样传实参的速度时就不用写正负号
        dir = parseInt(getStyle(obj,attr)) < target ? dir : -dir;

        // 点击后先关闭定时器，防止用户多次连续点击按钮造成加速运动
        clearInterval(obj.timer);

        obj.timer = setInterval(function(){//开一个定时器，每隔30毫秒前进一下
            var speed = parseInt(getStyle(obj,attr)) + dir;//速度

            //在赋值之前先限制最终距离，如果超过目标位置，那么让其等于目标位置
            if(speed > target && dir > 0 || speed < target && dir < 0){
                speed = target;
            }                       

            obj.style[attr] = speed + 'px';//点击一下按钮，红色方块向前进speed个像素;

            // 当left值大于目标位置时，关闭定时器让红色方块停止
            if(speed == target){//如果到达300，关闭定时器
                clearInterval(obj.timer);               
                endFn() && endFn();//判断是否有回调函数
            }
        },30);
    }

    $('btn').onclick = function(){
        doMove(div1,'left',12,200,function(){
            doMove(div1,'width',20,150);//回调函数
        });
    }

// 封装获取某个元素的样式函数
function getStyle(obj,attr){//obj:你要获取谁，attr:所获取的对象的什么样式
    return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
}

注意：
1、当运动到目标位置后，宽度展开，是使用了回调函数；
2、回调函数，在形参和实参中都要添加（具体看js代码）；
3、回调函数：doMove(div1,'left',12,200,function(){});function函数中继续添加函数的调用，如：

doMove(div1,'left',12,200,function(){
    doMove(div1,'width',20,150);//doMove()回调函数
});

4、doMove( )函数的实参分别是：元素名称（哪个元素运动）、哪个属性改变（要改变的属性名称）、速度（每次增加多少像素）、目标值（属性最终的目标值）；
5、endFn() && endFn();判断是否有回调函数，如果有就执行，如果没有就不执行；这段代码与下面代码等价：

 if(endFn){
    enfFn();
 }