正如改变一个属性的方法，可以使用已经写好的运动函数如move(obj,attr,target,fn);我们可能会想这样做，
调用两次运动函数，如同时改变宽和高，move(obj,'width',target,fn)；move(obj,'height',target,fn)；但是结果发现，只有高度改变，或是只有宽度改变，
其实原因是，每个函数里不是有定时器吗，在开始执行之前，就自动清除了一次定时器，所以执行改变第一个属性的move函数，实质上并未执行直接执行了第二个move函数，
所以，这样写的结果就是，改变哪个属性的函数排在后面，哪个属性就得到了改变，而并未真正达到同时改变多个属性的效果。
设置一个标志性的开关，如下面的bStop，即可实现分阶段完成任务
window.onload=function(){
var oDiv=document.getElementsByTagName('div')[0];
oDiv.onmouseover=function(){
move(this,{width:102,height:200,opacity:100});
}
}
function getStyle(obj,attr){
if (obj.currentStyle) {
return currentStyle(obj)[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
function move(obj,json,fn){
obj.timer=setInterval(function(){
var bStop=true;//表示这一次运动结束时所有值都到达目标点
for (var attr in json){
//1,获取当前
var iCur=0;
if (attr == 'opacity') {
iCur=parseInt(parseFloat(getStyle(obj,attr))*100);
}else{
iCur=parseInt(getStyle(obj,attr));
}
//2,计算速度
var speed=(json[attr]-iCur)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
//3,检测停止
if (iCur != json[attr]) {
bStop=false;
}
if (attr == 'opacity') {
obj.style.opacity=(iCur+speed)/100;
}else{
obj.style[attr]=iCur+speed+'px';
}
}
if (bStop) {
clearInterval(obj.timer);
fn&&fn();
}
},30);
}