SOURCE

 var btn = $("btn");
    var btn1 = $("btn1");
    var btn0 = $("btn0");
    var zi= $("zi");

    function doMove(ele,long,attr,last,endFun){
        clearInterval( ele.timers );

        long = parseInt(getStyle(ele,attr)) < last ? long :-long;


        ele.timers = setInterval(function(){
            var speed= parseInt(getStyle(ele,attr)) + long ;
            ele.style[attr]= speed +'px';

            if(speed > last && long > 0 || speed <= last && long < 0){
                speed = last;
            }

            ele.style[attr] = speed + 'px';

            if(speed == last){
                clearInterval( zi.timers );
                endFun && endFun();
            }

        },100);
    }

    btn.onclick= function () {
        doMove(zi,50,"left",300, function () {
            doMove(zi,20,"height",200)
        })
    };
    btn1.onclick= function () {
        doMove(zi,50,"left",10);
    };

    btn0.onclick= function () {
        clearInterval( zi.timers );
    }
    
    
    //样式获取
    function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; }

    //元素获取
function $( v ){
    if( typeof v === 'function' ){
        window.onload = v;
    } else if ( typeof v === 'string' ) {
        return document.getElementById(v);
    } else if ( typeof v === 'object' ) {
        return v;
    }
}

<div id="zi">

</div>

<button id="btn">向前</button>
<button id="btn0">暂停</button>
<button id="btn1">向后</button>

  *{margin: 0;padding: 0;font-family: "microsoft yahei", "sans-serif";text-decoration: underline;}
        div{ width: 100px; height: 100px;background: #c51736;position: absolute; left: 0; top: 150px;}