0

我有一系列这样的照片：

当我点击下一个按钮时，我想用 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 。但是有没有办法优化这段代码的执行以获得流畅的动画？

4

1 回答 1

1

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

如果您需要说服力，请查看速度测试。

有一个jQuery 插件可让您.animate()使用 GSAP 扩展 jQuery 函数，因此您无需更改任何代码。

如果您不想要另一个库的开销，那么您可以尝试优化您的 jQuery 动画（例如，确保您正在制作动画的元素是绝对定位的）或使用 CSS 过渡来为元素的位置属性设置动画，如果可用，它将在浏览器中使用本机硬件加速。这样做的缺点是在较旧的浏览器上根本无法使用，并且在实现不佳的浏览器（例如移动设备）上效果不佳。

于 2013-05-28T21:25:19.337 回答