大图象背景的浪费动画

Question

我正在完成由background-size:cover拉伸的大图像背景的网站。请看这里：http://knihaoplanu.g6.cz

正如您可能看到的，垂直动画并不那么顺利。所有JPEG图像的大小不超过500KB，它们的尺寸通常在1000x500左右。

我使用非常基本的代码：

function SlideShow() {
    $('#wrapper .scroll').bind('click',function(e){

    // SETUP
    e.preventDefault();
        var $anchor = $(this).attr('href');

        // ANIMATION
        $('#wrapper').stop().animate({
            scrollLeft: $($anchor).position().left
        }, 1000);
    });

对于我如何让动画更流畅，你有什么想法吗？我在网上找到了一些类似的主题，但没有一个提供非常明确的答案（至少对我而言）。其中一个人认为问题在于background-size:cover，但是如果没有这个问题就会出现波动。

非常感谢！

编辑（已解决）

CSS动画绝对是方式 - 动画变得更加顺畅。我不想重新编码网站，因为它非常接近截止日期，因此我使用了jQuery Transit plugin，正如Marcus所建议的那样。

可悲的是，我还没完成。当我用scrollLeft替换x命令时（如插件网站上所示），我的水平布局基于熔化的百分比种类。 :)

您能指导我如何使用scrollLeft并保留Transit的功能吗？

谢谢！

Answer 1

好的，一个很棒的Transit Plugin就是答案！如果运行速度低于500秒（在Firefox和Chrome上测试），动画仍然有点不稳定，但对我来说这不是一个大问题。

关于编辑 - 我忘记将x参数设为否定。 ：）

谢谢Marcus！