Q: Очень долго реагирует на изменения ширины браузера При изменении ширины браузера body должен выезжать (left: -181px) и становиться на место (left: 0). Всё, в принципе, работает. Вот рабочий кусок кода:


$(window).resize(function(){
if ($(document).width() >= 751){
 $('body').animate({
   left: '0'
 });
}
if($('.menn').css('right') == '0px' &&  $(document).width() < 751){
 $('body').animate({
  left: '-181'
 });
}
});


Но очень долго реагирует. Например, при сужении экрана программа "думает" очень долго и только потом применяется анимация к body left: '-181'.

A: Возможно, дело в отсутствии таймаута. При изменении размеров окна событие resize может наступать много раз и многократно вызывать вашу функцию с анимацией.
Обычно при resize ставят таймаут (в примере 300 мс) на выполнение действий. Если в течение этого времени поступило еще одно событие resize, таймаут переустанавливается еще на 300 мс. И только после того, как пользователь закончил изменение размеров окна и 300 мс ничего не происходит, вызывают свою функции реакции на resize:
var resizeTimer;
$(window).resize(function(){
    clearTimeout( resizeTimer );
    resizeTimer = setTimeout( function() {
        if ($(document).width() >= 751){
            $('body').animate({
              left: '0'
            });
        }
        if($('.menn').css('right') == '0px' &&  $(document).width() < 751){
            $('body').animate({
                left: '-181px'
            });
        }
    }, 300 );
});


A: Можно сделать не на jquery-анимации, а на css-анимации при участии media queries:


body {
  width: 100%;
  overflow: hidden;
  left: 0;
  transition: left 300ms;
  position: relative;
}

@media (max-width: 750px) {
  body {
    left: -181px;
    transition: left 300ms;
  }
}
Test1 test2 test3 test4 test5 test6


