jQuery动画摇摇欲坠

Posted

技术标签:

【中文标题】jQuery动画摇摇欲坠【英文标题】:jQuery animate being shaky 【发布时间】:2012-03-05 22:45:37 【问题描述】:

我正在使用 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】:

您的代码有错误。当垂直运动发生时,水平位置不是恒定的。这会导致您的问题。能否提供给我们相应的功能。

【讨论】:

以上是关于jQuery动画摇摇欲坠的主要内容,如果未能解决你的问题,请参考以下文章

jquery怎样实现动画的缩小?

深入学习jQuery动画控制

深入学习jQuery动画控制

jquery 加载动画效果怎么做

jquery动画效果总结

jquery animate方法动画效果没有