javascript - 动画的缓冲问题-PHP中文网问答

在模仿人家的代码学习缓冲，但是对其中的一段不理解。
html和css代码是这样的：

<style>
    body,p,span{
        margin:0;
        padding:0;
    }
    #p1{
        width:200px;
        height:200px;
        background: red;
        position: relative;
        left:-200px;
        top:0;
    }
    #p1 span{
        width: 20px;
        height:50px;
        background-color: blue;
        position: absolute;
        left:200px;
        top:75px;
    }
</style>
<body>
<p id="p1">
    <span id="share">分享</span>
</p>
</body>

js代码是这样的：

    window.onload = function () {
        var op = document.getElementById('p1');
        op.onmouseover = function () {
            startMove(0);

        };
        op.onmouseout = function () {
            startMove(-200);
        }
    };
    var timer;
    function startMove(iTarget) {
//        由于每次onmouseover都会执行一次startMove，因此会导致每次像素的移动距离都是在叠加
//        所以在每次调用该函数时需要清楚上次计时器带来的效果
        clearInterval(timer);
        var op = document.getElementById('p1');

       timer = setInterval(function(){
            var speed = (iTarget - op.offsetLeft)/10;
            speed = speed>0?Math.ceil(speed):Math.floor(speed);
            if(op.offsetLeft == iTarget){
                clearInterval(timer);
            }
            else {
                op.style.left = op.offsetLeft + speed + "px";
            }

        },30)
    }

我的问题主要在这一段

var speed = (iTarget - op.offsetLeft)/10;

因为iTaget和op.offsetLeft的值都是固定的，假如差是200，除以10，结果也就是20px，每30毫秒重复一次，所以变化应该是恒定的呀，但事实确是开始快，结束慢。

还有这一段

 speed = speed>0?Math.ceil(speed):Math.floor(speed);

为什么要调用Math方法，明明是整数，怎么会变成浮点数。

就这两个地方有点不理解。
谢谢帮助。