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

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

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(); }