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

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

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

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

$(":button").click(function() {
   $("p:first").toggle();
});
<p>Абзац</p>
<input type="button" value="Скрыть или отобразить абзац">

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

$("#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">

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

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

$("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.

Предыдущая статья Все статьи Следующая статья