JQuery улучшить анимацию() производительность

Question

Я работаю над дизайном страницы, который имеет на левой стороне 1 большой div, а с правой стороны - 6 маленьких выстроенных. Когда я нажимаю на один из правых боковых полей, содержимое с этого 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, которая делает быстрее, не работает, хотя во всех/старых браузерах ...