javascript - 这个小动画怎么搞才能达到目的

Question

//定义动画函数
function easing(elem,pos,time){
        if(elem.timeout)
            clearTimeout(elem.timeout);
        var right=parseInt(elem.css("right"));
        if(right<pos)
            //right+=Math.abs( Math.ceil((right-pos)/10) ) ;有问题的写法
            right+=Math.ceil((pos-right)/10);//没问题的写法
        else if(right> pos)
            //right-=Math.abs( Math.ceil((right-pos)/10) );有问题的写法
            right-=Math.ceil((right-pos)/10)//没问题的写法
        else
            return true;
        elem.css("right",right+"px");
        elem.timeout=setTimeout(function(){easing(elem,pos,time)},time);
    }

---------------------------------------------------------
        var elem=$("#rightbt");     
      elem.mouseover(function(){
          easing(elem,0,10);
      }).mouseout(function(){
          easing(elem,-48,10); 
      })

elem是一个已设置绝对定位的元素(position:absolute;right:-48px;)，
希望当鼠标放在他上面时或离开时，该元素的right属性在0到-48之间变化（该元素宽度200px）；
问题是上面有两行代码貌似有问题，当鼠标放在元素上时，该元素right应为0px,但实际却只达到-9px;当鼠标离开时，该元素right应为-48px,实际上可以达到-48px；
请大神指点，问题到底在哪？？
案例：https://jsfiddle.net/xx1hzt1t/1/

Answer 1

当-1 < (pos-right)/10 < 0的时候,Math.ceil得到的值为0，right就一直+0，导致死循环了。

Answer 2

既然你用了$，那代码逻辑可以进行优化。可参考如下：

function easing($obj, nPos, nTime) {
    $obj.bind({
        mouseenter : function() {
            $(this).stop(true, false)
            .animate({ right : 0 }, nTime);
        },
        mouseleave : function() {
            $(this).stop(true, false)
            .animate({ right : - nPos + 'px' }, nTime);
        }
    });
}

easing($('#rightbt'), 100, 500)

这段代码逻辑很简单，但还可以针对3点进行优化，如多个同类/不同类元素的绑定、Pos的高扩展性（json）、以及不依赖CSS的初始设定部分。按照版本不同，bind可以换成on。