适用于CSS2的各种运动的javascript运动框架

   <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,{ 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>

html代码

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

css代码

 div {
         200px;
        height: 200px;
        background: purple;
        border: 10px solid maroon; 
        margin-top: 10px;
        opacity: 0.3;
        filter: alpha(opacity: 30);
    }

 全手打，亲测可用，支持多物体，多属性，链式，同时运动。