Как плавно скрыть элемент (меню) при ресайзе окна?

Question

[alexnoew]

Суть в следующем. Есть меню вида:
Главная span Foo Bar Qux /span Контакты

При уменьшении ширины окна < 125px (разница между шириной экрана и шириной меню) необходимо скрывать то что находится в span.

Но у меня проблема в том, что при изменении ширины окна меню прыгает, то показывая, то скрывая что находится в span. Получается дергание. Как решают это?

Вот что я сделал.

function setMenuVisible() {
  $windowWidth = $(window).width();
  $menuCmpWidth = $('.menu_cmp').width();
  $elMenu = $('.menu_cmp > span');

  if (($windowWidth - $menuCmpWidth) < 125) {
    $elMenu.hide();
  } else {
    $elMenu.show();
  }
}

$(document).ready(function () {
  setMenuVisible();
});

$(window).resize(function() {
  setMenuVisible();
});

Answer 1

[swcalc]

Я, возможно, не отвечу на конкретный вопрос, но лучше для этого использовать CSS, здесь прекрасно описывается, как сделать это лаконичнее и более подходящими средствами.
habrahabr.ru/post/119127

Если же Вам необходимо быстро исправить сокрытие и показ, повторяющиеся многократно, друг за другом, попробуйте fadeTo.

Comments

[alexnoew]

Media Queries не получится. Количество пунктов меню динамическое. Т.е. ширина меню меню может быть разное. Поэтому думал вычислить ширину скриптом и по нему уже вычислять скрывать или нет.

Answer 2

[Егише]

if (($windowWidth - $menuCmpWidth) < 125) {
$elMenu.fadeOut(1000); // 1 секунда
} else {
$elMenu.fadeIn(1000);
}

Answer 3

[alexnoew]

Решил вопрос используя fadeOut