window.onload = function() {
                var Li = document.getElementById('li1');
                Li.onmouseover = function() {
                    startMove(Li, 'width', 400, function() {
                        startMove(Li, 'height', 200, function() {
                            startMove(Li, 'opacity', 100);
                        });
                    });
                }
                Li.onmouseout = function() {
                    startMove(Li, 'opacity', 30, function() {
                        startMove(Li, 'height', 100, function() {
                            startMove(Li, 'width', 200);
                        });
                    });
                }
            }

move.js

function startMove(obj, attr, target, fn) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        //获取当前的值
        var icur = 0;
        if(attr == 'opacity') {
            icur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
        } else {
            icur = parseInt(getStyle(obj, attr));
        }
        //2算速度
        var speed = (target - icur) / 8;
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        //3检测停止
        if(icur == target) {
            clearInterval(obj.timer);
            if(fn) {
                fn();
            }
        } else {
            if(attr == 'opacity') {
                obj.style.filter = 'alpha(opacity:' + icur + speed+ ')'; //IE
                obj.style.opacity = (icur + speed) / 100;
            } else {
                obj.style[attr] = icur + speed + 'px';
            }
        }
    }, 30);
}

function getStyle(obj, attr) {
    if(obj.currentStyle) {
        return obj.currentStyle[attr];
    } else {
        return getComputedStyle(obj, false)[attr];
    }
}