SOURCE

window.onload=function() {
  var oDiv=document.getElementsByTagName('div');
  var oDiv1=document.getElementById('div1');
  var oDiv2=document.getElementById('div2');
  var oDiv3=document.getElementById('div3');
	var oDiv4=document.getElementById('div4');
    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);
        }
         oDiv3.onmouseover=function() {
          startMove(this,'fontSize',19);
        }
         oDiv3.onmouseout=function() {
          startMove(this,'fontSize',12);
        } 
        oDiv4.onmouseover=function() {
          startMove(this,'borderWidth',10);
        }
         oDiv4.onmouseout=function() {
          startMove(this,'borderWidth',1);
        }
      }
}
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 id="div3">变字体的大小</div>
<div id="div4">变border的大小</div>
<!-- 记不清字体大小是如何表示的了 
记不清边框的大小该如何表示的了
自己瞎摸索已经解决-->

div {width: 200px; height: 200px; background: red; float: left; margin: 10px; border-width: 1px; border: 1px solid black; font-size: 12px;}