jQuery предоставляет очень много вариантов того, как можно скрыть или показать элемент на странице. В этой записи я покажу несколько примеров того, как это можно сделать.

Демо

Так же можете посмотреть пример на полном экране.
Для всех примеров ниже, я буду использовать один HTML каркас.

<button>Скрыть</button>
<p>Тут много-много элементов и текста</p>

При нажатии на <button> скрипт будет делать анимацию на <p>. Все очень просто! :)

Анимация с fadeToggle()

fadeToggle() — этот метод прячет или показывает элемент используя CSS свойство — opacity. Посмотреть подробную документацию можно на официальном сайте.

PS. fadeToggle() автоматически определяет отображается элемент на странице или нет, то есть не нужно проверять скрыть элемент или нет. Тоже самое относится к slideToggle(), который будет описан после этого метода.

Для полного понимания этого метода, вы должны знать, что он совмещает в себя два других метода — это fadeOut() (прячет элемент) и fadeIn() (показывать элемент).

Пример fadeToggle()

$(function() {
  $('button').click(function() {
    
    if ($(this).text() === 'Скрыть')
      $(this).text('Показать')
    else
      $(this).text('Скрыть')
      
      
      $('p').fadeToggle(200);
  });
});

На примере выше, я использую fadeToggle() и внутри пишу «200» (скорость анимации в миллисекундах — 1000 = 1 секунда), чтобы спрятать элемент <p> на странице.

Анимация с slideToggle()

slideToggle() — этот метод показывает или прячет элемент используя эффект слайда. Если элемент скрывается, то он как бы сдвигается вверх пока не пропадет, а если показывается, то съезжает вниз. Посмотреть подробную документацию можно на официальном сайте.

PS. Для полного понимания этого метода, вы должны знать, что он совмещает в себя два других метода — это slideUp() (прячет элемент) и slideDown() (показывать элемент).

Пример slideToggle()

$(function() {
  $('button').click(function() {
    
    if ($(this).text() === 'Скрыть')
      $(this).text('Показать')
    else
      $(this).text('Скрыть')
      
      
      $('p').slideToggle(200);
  });
});

На примере выше, я использую slideToggle() и внутри пишу «200» (скорость анимации в миллисекундах), чтобы спрятать элемент <p> на странице.