jQuery动画不稳定

时间:2012-02-14 14:54:58

标签: jquery image jquery-animate

我正在使用jQuery做一个动画,在横幅类型的容器中平移图像。它的工作几乎完美,但似乎有点紧张。我已经尝试过加速并放慢速度,但它仍然会动摇。

我一开始认为它可能是硬件问题而且PC无法处理平移高分辨率图像。但我已经证实,通过缩小和降低图片质量不会成为问题。

您可以在此处查看平移图像:http://parkland2.wethink.ca

动画代码:

jQuery.fn.extend({
    letsTravel: function() {
        var horizontalRange = jQuery(this).width() - jQuery(this).parent().width();
        var verticalRange = jQuery(this).height() - jQuery(this).parent().height();
        var halfHeight = div(verticalRange,2);
        //horizontalRange and verticalRange are maximum valid horizontal/vertical offset
        //all coordinates should be below 0 because start point is 0,0
        jQuery(this).animate({left: (horizontalRange-120)*(-1), top: halfHeight*(-1)},20000, 'linear', function(){
            jQuery(this).animate({left: horizontalRange*(-1), top: verticalRange*(-1)},20000, 'linear', function(){
                jQuery(this).animate({left: (horizontalRange/2)*(-1)},10000, 'linear', function(){
                    jQuery(this).animate({left: 0, top: halfHeight*(-1)},20000, 'linear', function(){
                        jQuery(this).animate({top: 0},10000, 'linear');
                    });
                });
            });
        });
    }       
});

有什么想法吗?

由于

1 个答案:

答案 0 :(得分:0)

您的代码中存在错误。当发生垂直运动时,水平位置不是恒定的。这会导致您的问题。你能为我们提供适当的功能吗?