1

При изменении ширины браузера 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'.

2 ответа 2

6

Возможно, дело в отсутствии таймаута. При изменении размеров окна событие 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 );
});
1
4

Можно сделать не на 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

1
  • 1
    При прочих равных, css анимация всегда быстрее, чем js. Commented 3 мая 2017 в 4:36

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.