Затухание и сворачивание: fade и slide

Кроме show() и hide() у jQuery есть две пары эффектов. Затухание (fade) меняет только прозрачность, а сворачивание (slide) — только высоту. Оба принимают длительность и функцию по окончании, как hide().

Затухание

<p id="message">Задача добавлена</p>
<button id="out">Скрыть</button>
<button id="in">Показать</button>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $('#out').on('click', function () {
    $('#message').fadeOut(400);
  });
 
  $('#in').on('click', function () {
    $('#message').fadeIn(400);
  });
</script>

Сообщение плавно исчезает и проявляется. После fadeOut() элемент получает display: none, и место под ним освобождается.

Сворачивание

slideUp() сворачивает элемент вверх, slideDown() разворачивает. slideToggle() выбирает действие сам — так делают раскрывающиеся блоки:

<button id="more">Подробнее</button>
<div id="details" style="display: none">
  <p>Задачи сохраняются в браузере и не пропадают после перезагрузки.</p>
</div>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $('#more').on('click', function () {
    $('#details').slideToggle(300);
  });
</script>

Нажатие кнопки разворачивает блок с текстом, повторное — сворачивает.

Все эффекты

Удаление задачи с затуханием

Пример курса: пункт сначала растворяется, а удаляется только по окончании анимации.

<ul id="tasks">
  <li>Купить хлеб <button class="delete">Удалить</button></li>
  <li>Позвонить Олегу <button class="delete">Удалить</button></li>
</ul>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $('#tasks').on('click', '.delete', function () {
    $(this).closest('li').fadeOut(300, function () {
      $(this).remove();
    });
  });
</script>

Внутри функции окончания this — элемент, который анимировался, то есть пункт li.

Пауза и очередь

Эффекты одного элемента выстраиваются в очередь и идут друг за другом. delay() добавляет в очередь паузу:

<p id="message" style="display: none">Сохранено</p>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $('#message').fadeIn(200).delay(1500).fadeOut(400);
</script>

Сообщение появляется, держится полторы секунды и исчезает — типичное всплывающее уведомление.

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

Без jQuery такие эффекты делают CSS-свойством transition для opacity или max-height и переключением класса, либо методом element.animate().

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

Быстро нажимать кнопку с slideToggle() — и смотреть, как блок ещё долго ездит туда-сюда: каждое нажатие добавило эффект в очередь. Перед новым эффектом остановите текущий методом stop():

// script.js
$('#details').stop().slideToggle(300);

stop() прерывает текущую анимацию, и новая начинается сразу с того места, где остановилась старая.