Почему функция запускает синусоидальную волну так высоко вдоль оси Y?

Question

Взгляните на эту синусоидальную анимацию.Обратите внимание, что это начальная и конечная позиции.

Эти 2 должны быть равны, но они не равны.

Я думаю, что решением было бы сохранить последнее использованное значение p из предыдущей итерации ипримените его к текущему.

Демонстрация изображения ниже : http://jsfiddle.net/WPnQG/4/

function float(dir){
    var x_current = $("div").offset().left;
    var y_current = $("div").offset().top;
    var SineWave = function() {
        this.css = function(p) {
            var s = Math.sin(Math.abs(p-1)*10);
            if (!dir){// flip the sin wave to continue traversing
               s = -s;
            }
            var x =  300 -p * 300;
            var y = s * 100 + 150;
            //var o = ((s+2)/4+0.1); //opacity change
            // add the current x-position to continue the path, rather than restarting
            return {top: y + "px", left: x_current + x + "px"};
        } 
    };

    $("div").stop().animate({
        path: new SineWave
    }, 5000, 'linear', function(){
        // avoid exceeding stack
        // uncomment for this to continue animating
        //setTimeout(function(){float(!dir)}, 0);
    });

}

float(true);

Answer 1

Я не могу найти никакой документации о свойстве path, но значение p начинается с 1 и постепенно переходит на 0.