jQuery提高animation（）性能

Question

我正在进行页面设计，该页面设计的左侧是1个大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);
  });
});

这是我目前正在处理的完整代码： https : //github.com/renepickhardt/metalcon/tree/feature/frontend/basic_page_template问题的相关部分将位于main.html，contentswap2.js中和style.css。 我试图将问题归结为实质，但是我想那还不够清楚。

Answer 1

这似乎是一个相当沉重的动画，取决于您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来加速硬件的，从而加速了硬件的速度，尽管在所有/较旧的浏览器中都无法使用...