<script>

     window.onload = function() {

             //var oDiv1 = document.getElementById('box1');

             //var oDiv2 = document.getElementById('box2');

             // oDiv1.timer = null;

             var oDiv = document.getElementsByTagName('div');

             for (var i = 0; i < oDiv.length; i++) {

                 oDiv[i].timer = null;

                 oDiv[i].onmouseover = function() {

                     var that = this;                                    //闭包的关系，把this传递过去

                     startMove(this, {'width': 205, 'height': 500},function(){

                         startMove(that, {'opacity': 100});

                     });

                     //alert(getStyle(this,'opacity'))

                 }

                 oDiv[i].onmouseout = function() {

                     var that = this;

                     startMove(this, {'width': 200,'height':200}, function(){

                         startMove(that, {'opacity': 30});

                     });

                 }

             }

         }

         //var timer = null;

     function getStyle(obj,name){　　　　　　　　　　//获取样式的函数

         if(obj.currentStyle){

             return obj.currentStyle[name];    //这里用这种形式的原因是name是以字符串的形式传递过来的

         } else{

             return getComputedStyle(obj,false)[name];       //得到加上边框的总宽

         }

     }

     //startMove(onj,{width: 200, height: 200}, fnEnd)

     function startMove(obj, json, fnEnd) {

         clearInterval(obj.timer);

         obj.timer = setInterval(function() {

             var bStop = true;                   //开了定时器之后设立一个假设：所有运动都停止了，那些把假设设到定时器外面的都是错误的方法

             for(var attr in json){

             var cur = 0;

             if(attr == "opacity"){

                 cur = Math.round(parseFloat(getStyle(obj,attr)) * 100);     //要取整

             } else {

                 cur = parseInt(getStyle(obj,attr))

             }

             var speed = (json[attr] - cur) / 10; //

             speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

             if (cur !== json[attr]) {               //如果某次循环的值不等于目标值，

                 bStop = false;                          //假设不成立

             };

                 if (attr == "opacity"){

                 obj.style.opacity = (speed + cur)/100;

                 obj.style.filter = 'alpha(opacity:'+ (speed + cur) +')';

                 } else{

                     obj.style[attr] = cur + speed + 'px';

                 }

         }

         if(bStop){                                          //所有的假设都成立了，才关闭定时器

             clearInterval(obj.timer);

             if(fnEnd) fnEnd();                              //如果有回调函数，则执行回掉函数

         }

         }, 30)

     }

     </script>

  <div id="box1"></div>

  <div id="box2"></div>

  div {

         width: 200px;

         height: 200px;

         background: purple;

         border: 10px solid maroon;

         margin-top: 10px;

         opacity: 0.3;

         filter: alpha(opacity: 30);

     }