Эффекты и анимация

Базовый набор методов библиотеки jQuery позволяет плавно отображать и скрывать элементы, управлять прозрачностью, а также создавать произвольную анимацию за счет изменения различных числовых атрибутов. Множество других эффектов реализуется с помощью дополнительных модулей.

Управление отображением элемента

Для управления отображением элементов предназначены следующие методы.

  • show([<Продолжительность>[, <Функция обратного вызова>]]) — отображает элемент.
  • hide([<Продолжительность>[, <Функция обратного вызова>]]) — скрывает элемент.
  • toggle([<Продолжительность>[, <Функция обратного вызова>]]) — позволяет чередовать сокрытие и отображение элементов. Если элемент скрыт, то он будет отображен, и наоборот.
$(":button").click(function() {
   $("p:first").toggle();
});
<p>Абзац</p>
<input type="button" value="Скрыть или отобразить абзац">

После первого щелчка на кнопке абзац будет скрыт. Если щелкнуть второй раз, то абзац будет отображен.

  • toggle(<Условие>) — если в качестве параметра указано значение true, то элемент будет отображен (с помощью метода show()), а если указано значение false, то он будет скрыт (с помощью метода hide()).
  • slideDown([<Продолжительность>[, <Функция обратного вызова>]]) — показывает элемент, спуская его сверху вниз.
  • slideUp([<Продолжительность>[, <Функция обратного вызова>]]) — скрывает элемент, поднимая его снизу вверх.
  • slideToggle([<Продолжительность>[, <Функция обратного вызова>]]) — позволяет чередовать сокрытие и отображение элементов. Если элемент скрыт, то он будет отображен (спущен сверху), и наоборот (поднят снизу вверх).
$("#btn1").click(function() {
   $("div").slideDown(1000);
});
$("#btn2").click(function() {
   $("div").slideUp(1000);
});
$("#btn3").click(function() {
   $("div").slideToggle(1000);
});
<div 
   style="background-color:green;height:150px;display:none;">
   Скрытый элемент
</div>
<input type="button" value="Отобразить элемент" id="btn1">
<input type="button" value="Скрыть элемент" id="btn2">
<input type="button" value="Отобразить или скрыть элемент"
   id="btn3">

В необязательном параметре <Продолжительность> может быть указано время выполнения анимации в миллисекундах или следующие значения:

  • fast — 200 миллисекунд;
  • normal — 400 миллисекунд;
  • slow — 600 миллисекунд.

Отобразим все абзацы.

$("p").show();

Скроем все абзацы.

$("p").hide("slow");
$("p").hide(600);

Во втором параметре может быть указана функция, которая будет вызвана после окончания анимации. Указывается ссылка на функцию следующего формата.

function <Название функции>() {
   // ...
}

Внутри функции обратного вызова доступен указатель (this) на текущий DOM-элемент. При щелчке на ссылке вначале скроем ее, а затем по окончании анимации отобразим.

$("a").click(function() {
   $(this).hide(600, function() {
      $(this).show("normal");
   });
   return false; // Прерываем переход по ссылке
});

В качестве примера сокрытия и отображения элементов создадим меню, в котором можно отобразить не более одного элемента (листинг 7.1).

Листинг 7.1. Сокрытие и отображение элементов

<!doctype html>
<html>
<head>
<title>Сокрытие и отображение элементов</title>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script>
$(document).ready(function() {
   $("a.menu").click(function() {
      // Находим элемент, расположенный сразу после ссылки
      var elem = $(this).nextAll("div.elem:first");
      if (elem.is(":hidden")) { // Если элемент скрыт
         // Скрываем видимые элементы
         $("div.elem:visible").hide();
         // Отображаем элемент, расположенный сразу после ссылки
         elem.show();
      }
      else {          // Если элемент был отображен ранее
         elem.hide(); // Скрываем элемент
      }
      return false;   // Прерываем переход по ссылке
   });
});
</script>
<style>
.menu { color:black; }
.elem { display:none; }
</style>
</head>
<body>
<a href="#" class="menu">Отобразить или скрыть элемент 1</a><br>
<div class="elem">Скрытый элемент 1</div>
<a href="#" class="menu">Отобразить или скрыть элемент 2</a><br>
<div class="elem">Скрытый элемент 2</div>
<a href="#" class="menu">Отобразить или скрыть элемент 3</a><br>
<div class="elem">Скрытый элемент 3</div>
<a href="#" class="menu">Отобразить или скрыть элемент 4</a><br>
<div class="elem">Скрытый элемент 4</div>
</body>
</html>

Изначально все элементы DIV, имеющие класс elem, скрыты. При щелчке на ссылке, имеющей класс menu, находим элемент DIV, который следует сразу после ссылки. Далее с помощью метода is() проверяем, является ли элемент скрытым. Если да, то скрываем все видимые элементы DIV, а затем отображаем элемент, а если нет, то просто скрываем его. И наконец, прерываем переход по ссылке, возвращая значение false.

Самоучитель по jQuery
Самоучитель по jQuery Учебник по jQuery 3.5.1 и AJAX в формате PDF

Помощь сайту

Yandex-деньги: 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов

Поиск по сайту в Яндексе