SOURCE

window.onload=function() {
  var oDiv=document.getElementsByTagName('div');
  var oDiv1=document.getElementById('div1');

    for(var i=0; i<oDiv.length; i++)
      {
        oDiv[i].timer=null;
        oDiv1.onmouseover=function() {
        startMove(this,'opacity',70);
        }
        oDiv1.onmouseout=function() {
        startMove(this,'opacity',30);
        }
      }
}
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() {
    if(attr=='opacity')
    {
       cur=Math.round(getStyle(obj,attr)*100);//这里采用的是四舍五入法。针对计算机不能精确的存储小数。
    }
    else {    
     cur=parseInt(getStyle(obj,attr));
        }
       var speed=(iTarget-cur)/10;
       speed=speed>0?Math.ceil(speed):Math.floor(speed);
       if(cur==iTarget) {
       	clearInterval(obj.timer);
       }
       else
       {
        if(attr=='opacity')
        {
          obj.style.filter='alpah(opacity:'+cur+speed+')';
          obj.style.opacity=(cur+speed)/100;
          document.getElementById('text1').value=obj.style.opacity;//在文本框内我并没有看到很长的数字。视频中讲解是在ie7出现问题。
          //alert(0.07*100);//弹出的值为7.00000001,这是一个非常细小的问题。也是所有pc机都会遇到的问题,用四舍五入法，解决。
        }
        else
        {    
          obj.style[attr]=cur+speed+'px';
        }
        }
  },30);
}

<input id="text1" type="text">
<div id="div1">变宽</div>
<!-- 记不清字体大小是如何表示的了 
记不清边框的大小该如何表示的了
自己瞎摸索已经解决-->

div {width: 200px; height: 200px; background: red; float: left; margin: 10px; border-width: 1px; border: 1px solid black; font-size: 12px; filter: alpha(opacity: 30); opacity: 0.3;}