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);
    });

}