javascript 组合动画调用，如何理解？

Question

1. 这段代码为什么先高度变化再宽度变化呢？是不是函数当成参数传进另一个函数就要后执行

2. 如何优化这段代码?

自己传自己算递归么?

startMove(this,400,'height',function(){
            startMove(container,400,'width');//???
        });

<p id="container">

css

#container{
    border: 1px solid blue;
    width: 200px;
    height: 200px;
    background-color: red;
    opacity: 0.5;
}

js

window.onload=function(){
    var container = document.getElementById('container');
    container.onmouseover=function(){
        startMove(this,400,'height',function(){
            startMove(container,400,'width');//???
        });
    }
};
var timer=null;
function startMove(obj,target,attr,fn)
{
    clearInterval(timer);
    timer=setInterval(function(){
        var speed=(target - getStyle(obj,attr))/20;
        speed = speed>0?Math.ceil(speed):Math.floor(speed);
        if(getStyle(obj,attr) == target)
        {
            clearInterval(timer);
            if(fn)
            {
                fn();
            }
        }
        else
        {
            obj.style[attr]=getStyle(obj,attr) + speed + 'px';
        }
    },30)
}
function getStyle(obj,attr){
    if(obj.currentStyle)
    {
        return parseFloat(obj.currentStyle[attr]);
    }
    else
    {
        return parseFloat(getComputedStyle(obj,false)[attr]);
    }
}

Answer 1

startMove(this,400,'height',function(){

        startMove(container,400,'width');//???
    });
    

这个算是回调。
jquery的animate（{left:50}，秒，回调1）.animate（{top:50}，秒，回调2）两个animate同时触发
jquery的animate（{left:50}，秒，.animate（{top:50}，秒，回调2））第一个完了，执行第二个