Laggy动画效果

Question

我写了一个类来给容器内部或后面的元素提供一个paralax效果。

动画背后的骨干是这个等式：

coords = (windowTopY - topYPositionOfTheCurrentElement) / speed) * direction

起初我认为这是因为(windowTopY - topYPositionOfTheCurrentElement)而滞后，但它仍然滞后。

基本上我要做的就是在容器内移动图像，比内容慢。

示例：http://lineabridge.v5.cloudsvr.com.au/＆amp;小提琴：http://jsfiddle.net/SDmdM/1/

这是自己的课程：

$.fn.paralaxBackgroundImage = function(method, settings ){
    settings = $.extend({
        element : $('.paralaxImage'),
        magnitude : 2,
        direction : 1,
        winTop : 0
    }, settings);
    var methods = {
        start: function(currentElement) {       
            $(window).on('scroll.paralaxScroll', function() {
                settings.winTop = $(this).scrollTop();

                // Set the new coordinates on the current element
                currentElement.css({
                    marginTop: ((settings.winTop - currentElement.closest('.paralax').position().top) / settings.magnitude) * settings.direction
                });
            }); 
        },
        stop : function() {
            $(window).off('.paralaxScroll');            
        }
    }
    this.each(function() {
        if ((method == 'start' || method === undefined)) {
            methods.start($(this));
        }
        else if (method == 'stop') {
            methods.stop($(this));
        }
    });
    return this;
}