SOURCE

window.onload=function() {
  var oDiv=document.getElementsByTagName('div');
  var oDiv1=document.getElementById('div1');
	var oDiv2=document.getElementById('div2');
    for(var i=0; i<oDiv.length; i++)
      {
        oDiv[i].timer=null;
        oDiv1.onmouseover=function() {
        startMove(this,'width',400);
        }
        oDiv1.onmouseout=function() {
        startMove(this,'width',200);
        }
        oDiv2.onmouseover=function() {
        startMove(this,'height',400);
      }
        oDiv2.onmouseout=function() {
        startMove(this,'height',200);
      }
      }
}
function getStyle(obj,name) {
  if(obj.currentStyle)
  {
    return obj.currentStyle[name];
  }
  else
  {
    return getComputedStyle(obj,false)[name];
  }
}
  // var alpha=30;
function startMove(obj,attr,iTarget) {
	clearInterval(obj.timer);
	obj.timer=setInterval(function() {
       var speed=(iTarget-parseInt(getStyle(obj,attr)))/10;
       speed=speed>0?Math.ceil(speed):Math.floor(speed);
       if(parseInt(getStyle(obj,attr))==iTarget) {
       	clearInterval(obj.timer);
       }
       else
       {
      obj.style[attr]=parseInt(getStyle(obj,attr))+speed+'px';
       }
  },30);
}
// function startMove2(obj,attr,iTarget) {
//   clearInterval(obj.timer);
//   obj.timer=setInterval(function() {
//        var speed=(iTarget-parseInt(getStyle(obj,attr)))/10;
//        speed=speed>0?Math.ceil(speed):Math.floor(speed);
//        if(parseInt(getStyle(obj,attr))==iTarget) {
//         clearInterval(obj.timer);
//        }
//        else
//        {
//       obj.style.height=parseInt(getStyle(obj,attr))+speed+'px';
//        }

//   },30);
// }

<div id="div1">变宽</div>
<div id="div2">变高</div>

div {width: 200px; height: 200px; background: red; float: left; margin: 10px;}