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

点击按钮，方块运动到右边目标位置，然后宽度展开；

也可以设置高度展开参考滑块运动 — 到目标位置高度展开；

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