Показать и скрыть: show, hide, toggle

Эффекты jQuery — готовые анимации для частых задач: плавно скрыть подсказку, развернуть блок, показать сообщение. Самые простые из них — hide(), show() и toggle().

Мгновенно

Без аргументов методы работают мгновенно. hide() ставит элементу display: none, а show() возвращает прежнее значение display:

<p id="hint">Нажмите на задачу, чтобы отметить её выполненной.</p>
<button id="toggle">Подсказка</button>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $('#hint').hide();
 
  $('#toggle').on('click', function () {
    $('#hint').toggle();
  });
</script>

Подсказка скрыта сразу при загрузке. Каждое нажатие кнопки показывает или прячет её: toggle() выбирает действие сам.

С анимацией

Если передать длительность, элемент плавно меняет размер и прозрачность. Длительность задают в миллисекундах или словами 'fast' (200 мс) и 'slow' (600 мс):

<p id="hint">Нажмите на задачу, чтобы отметить её выполненной.</p>
<button id="hide">Скрыть</button>
<button id="show">Показать</button>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $('#hide').on('click', function () {
    $('#hint').hide(400);
  });
 
  $('#show').on('click', function () {
    $('#hint').show('slow');
  });
</script>

Абзац сворачивается за 0,4 секунды и разворачивается за 0,6.

Функция по окончании

Анимация идёт в фоне, и следующая строка кода выполняется сразу. Чтобы сделать что-то после завершения, передают функцию последним аргументом:

<p id="hint">Подсказка</p>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $('#hint').hide(500, function () {
    console.log('Подсказка скрыта');
  });
 
  console.log('Анимация началась');
</script>

Сначала выводится «Анимация началась», через полсекунды — «Подсказка скрыта».

Виден ли элемент

Селектор :visible и :hidden проверяют, отображается ли элемент. С методом is() получается условие:

<p id="hint" style="display: none">Подсказка</p>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  console.log($('#hint').is(':visible')); // false
  console.log($('#hint').is(':hidden'));  // true
</script>

Скрытие через класс

Для постоянных состояний — «пункт выполнен», «фильтр включён» — лучше переключать класс с display: none в CSS. Тогда состояние видно в разметке, а стили остаются в одном месте:

<style>
  .is-hidden { display: none; }
</style>
 
<ul>
  <li>Купить хлеб</li>
  <li class="done">Позвонить Олегу</li>
</ul>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $('.done').addClass('is-hidden');
</script>

Выполненный пункт скрыт.

То же на обычном JavaScript

Мгновенный вариант — это element.hidden = true или element.style.display = 'none'. Плавное скрытие без jQuery делают CSS-переходом (transition) и переключением класса.

Частая ошибка

Писать следующее действие сразу после анимации:

// script.js
$item.hide(400);
$item.remove(); // пункт исчезает мгновенно, анимации не видно

remove() выполняется, не дожидаясь конца анимации. Всё, что должно случиться после, переносите в функцию окончания: $item.hide(400, function () { $(this).remove(); }).