jQuery沿贝塞尔曲线制作动画，每个周期出现不规则的y轴偏移

Question

我基本上是在一个sin wave上制作一个物体。但是，它只遍历一个段，而我需要它不断遍历。

我正在递归地重复动画，因为它遵循路径，而不是它通常在开始时重新启动的方式。

但是，循环的每次重复都会使元素在下一个循环开始时略微降低。

如何让它无缝地跟随曲线？

查看演示： http://jsfiddle.net/nfeZF/121/

---

function float(dir){
    var x_current = $("div").offset().left;
    var y_current = $("div").offset().top;
    var SineWave = function() {
        // this is called every step in the animation over 6000 miliseconds, updating the x/y coordinates
        // with sin rules applied to follow the curve
        // repeating this cycle (each timeout callback) drops the 
        // object about 50-100 pixels down from where it left off
        this.css = function(p) {
            var s = Math.sin(p*10);
            if (!dir){
                // swap the direction to continue on the path
                s = -s;   
            }
            var x =  300-p * 300;
            var y = s * 100 + 100;
            var o = ((s+2)/4+0.1);
            // add the current x-position to continue the path, rather than restarting
            return {top: y + "px", left: x_current + x + "px"};
        } 
    };

    $("div").animate({
        path: new SineWave
    }, 6000, 'linear', function(){
        // avoid exceeding stack
        setTimeout(float(!dir), 0);
    });

}