Question

我有一系列这样的照片：

当我点击下一个按钮时，我想用jquery尽可能快地移动它。我正在尝试这段代码。

$(document).ready(function() {
    function movePhotoCycle(next) {
     if (next) {
        // move the first photo at the end
        $(".slidephoto").first().clone().appendTo("#slidebox");
     } else {
        // move the last photo at the beginning

                ....
     }
};

  $("#next").click(function() {
    var boxleft = $("#slidebox").position().left;
         $("#slidebox").animate({
            left: boxleft - 1500
         }, 1500, function () { 
            $(".slidephoto").first().remove();
         });
        movePhotoCycle(true);
    return false;
});
});

它确实有效，但在我的I5电脑上有点奇怪（不够流畅）。帧率低于30，有时甚至更低。可能是因为每张图片大约是915x390。但有没有办法优化此代码的执行，以获得流畅的动画？

Answer 1

如果您需要真正流畅的动画，我建议您使用GSAP JS而不是jQuery来制作动画。如果可用，GSAP还将利用本机硬件加速，jQuery不会。

如果您需要说服，请查看the speed test。

有jQuery plugin允许您使用GSAP扩展jQuery .animate()函数，因此您无需更改任何代码。

如果您不想要另一个库的开销，那么您可以尝试优化您的jQuery动画（例如，确保您动画的元素绝对定位）或使用CSS过渡来设置位置属性的动画。您的元素，如果可用，将在浏览器中使用本机硬件加速。这样做的缺点是在旧版浏览器上根本不工作，而在浏览器上实施不当（如移动设备）则非常糟糕。

使用Jquery移动大图像的流畅方式

1 个答案: