0

我正在整理具有大图像背景的网站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 插件，正如 Marcus 所建议的那样。

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

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

谢谢你！

4

1 回答 1

1

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

关于编辑 - 我忘记将x参数设为负数。:)

谢谢马库斯！

于 2013-06-25T22:00:35.903 回答