Javascript JQuery提高动画（）性能

我正在做一个页面设计，左边有一个大div，右边有6个小div。当我单击右侧的一个div时，该div中的内容会转移到左侧，前一个大div显示在右侧。为此，我用JQuery编写了一个动画，它将我的左侧div移动到我单击的元素的位置，隐藏它，然后将它扩展回其原始位置。我的问题是，它在Chrome上运行得很好，但当我在Firefox上试用时，动画就落后了。如何在不同的浏览器中提高动画的性能

$(document).ready(function() {
  $(".small").click(function() {
    var offset = $(this).offset();
    var pusher = offset.top - 54;
    $("div.left-side").css({'height': '129', 'left': '40%', 'top':  offset, 'opacity': '0'});
    $("div.left-side").animate({'left': '0%','top': '0', 'height': '800', 'opacity': '1'}, 500);
    $('html, body').animate({scrollTop: $(".container").offset().top}, 500);
  });
});

以下是我目前正在编写的完整代码： 该问题的相关部分位于main.html、contentswap2.js和style.css中。

---

我试图将问题归结为本质，但我想这还不够清楚。

这似乎是一个相当沉重的动画，依赖于HTML的其余部分

无论如何，您可以尝试将

transform:translate3d（0，0，0）

添加到.css（）部分，以便：

$("div.left-side").css({'transform': 'translate3d(0, 0, 0)', 'height': '129', 'left': '40%', 'top':  offset, 'opacity': '0'});

但别忘了浏览器前缀：-webkit，-moz。。。如果你期待旧的浏览器

---

这个技巧实际上通过将内容发送到GPU来强制硬件加速，GPU渲染速度更快，但在所有/旧浏览器中都不起作用…

这似乎是一个相当繁重的动画，依赖于HTML的其余部分

无论如何，您可以尝试将

transform:translate3d（0，0，0）

添加到.css（）部分，以便：

$("div.left-side").css({'transform': 'translate3d(0, 0, 0)', 'height': '129', 'left': '40%', 'top':  offset, 'opacity': '0'});

但别忘了浏览器前缀：-webkit，-moz。。。如果你期待旧的浏览器

---

这个技巧实际上通过将内容发送到GPU来强制硬件加速，GPU渲染速度更快，但在所有/旧的浏览器中都不起作用…

请提供您的html和CSS。如何定义布局将对性能产生影响well@user2747192不久前我就遇到了这个问题。通过css3转换和变换，您将获得更平滑的动画。如果你还没有看到它，请检查一下：请提供你的html和CSS。如何定义布局将对性能产生影响well@user2747192不久前我就遇到了这个问题。通过css3转换和变换，您将获得更平滑的动画。如果您还没有看到，请查看以下内容：