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

Question

我基本上是在正弦波上为对象设置动画。然而，它只遍历一个段一次，而我需要它不断地遍历。

我递归地重复动画以使其遵循路径，而不是通常从头开始重新启动的方式。

然而，循环的每次重复都会在下一个循环开始时将元素稍微降低。

我怎样才能让它无缝地遵循曲线？

查看演示：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);
    });

}