Почему jQuery .animate() jumpy?

Question

На https://xjour.com У меня есть оживленная анимация навигации.

Он прыгает на FF и Chrome.

Работы, как и ожидалось, на краю и на мобильных устройствах.

Я сделал JSFiddle, чтобы воспроизвести проблему.

Здесь он работает как ожидалось.

Чтобы закрыть его, нажмите на ссылку, а не на ссылки.

https://jsfiddle.net/9kak1088/

код не более чем

function open() { 


     $('.menu').animate({ 
      'width':'17vw' 
     },100) 

     $('html').one('click', close) 
} 

function close() { 

     $('.menu').animate({ 
      'width':'2.994vw' 
     },100) 


     $('.menu').one('click',open) 
} 

$('.menu').one('click',open); 

Answer 1

Я не мог получить доступ к вашему примеру сайт из безопасной связи не удалось, но это нормально с скрипкой.

jQuery animate раньше был ОК до CSS3, но он может пострадать от некоторых проблем с производительностью, исходящих от Javascript. Из того, что я понимаю, он оживляет вычисление и перемещение позиций элементов, основанных на тайм-аутах. Это может быть действительно нервным в зависимости от того, сколько элементов вы оживляете, или если javascript действительно занят чем-то другим в то время.

Общим решением здесь будет использование функций CSS3, которые были сделаны специально для этого. В конечном итоге вы можете использовать решение jQuery в качестве резервного для старых браузеров (у вас есть решения для обнаружения в javascript, если поддерживается CSS3).

CSS3 переход работает путем настройки перехода на атрибут CSS:

.menu{ 
    transition: width 0.1s linear 0s; 
    -moz-transition: width 0.1s linear 0s; 
    -webkit-transition: width 0.1s linear 0s; 
    -o-transition: width 0.1s linear 0s; 
    -ms-transition: width 0.1s linear 0s; 
} 

тогда, когда значение атрибута модифицируется, Broswer оживляет автоматически:

$('.menu').css({ 
    'width':'41vw' 
}); 

здесь скрипку: https://jsfiddle.net/fz4pwwjj/2/