Создание анимации

Практически все методы, которые мы рассматривали в двух предыдущих разделах, используют метод animate(). Этот метод позволяет создавать произвольную анимацию за счет изменения числовых атрибутов (например, height, width, opacity и др.).

Примечание

Плавное изменение значений атрибутов, задающих цвет, рассматривается в главе 12, в разделе 12.12.1.

Метод animate() имеет два формата.

animate(<Изменяемые атрибуты>, <Опции>)
animate(<Изменяемые атрибуты>[, <Продолжительность>[, <Эффект>
       [, <Функция обратного вызова>]]])

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

{
   Атрибут1: "Значение1",
   Атрибут2: "Значение2",
   ...
   АтрибутN: "ЗначениеN"
}

Если название атрибута содержит дефис, то такое название необходимо указывать в стиле JavaScript (например, fontSize вместо font-size). В качестве значения могут быть указаны:

число с абсолютными единицами измерения (например, px, in и др.);
число с относительными единицами измерения % и em;
hide, show или toggle.

Можно также определять значения атрибута относительно его текущей позиции, указав перед значением += или -= (листинг 7.2).

Листинг 7.2. Передвижение элементов

<!doctype html>
<html>
<head>
<title>Передвижение элементов</title>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script>
$(document).ready(function() {
   $("#btn1").click(function() {
      $("#div1").animate({ left: "-=" + $("#txt1").val()}, 1000);
   });
   $("#btn2").click(function() {
      $("#div1").animate({ left: "+=" + $("#txt1").val()}, 1000);
   });
   $("#btn3").click(function() {
      $("#div1").animate({ top: "-=" + $("#txt1").val()}, 1000);
   });
   $("#btn4").click(function() {
      $("#div1").animate({ top: "+=" + $("#txt1").val()}, 1000);
   });
});
</script>
<style>
.cls1 {
   position:absolute;
   top:50px;
   left:10px;
   width:100px;
   height:100px;
   background-color:black;
}
</style>
</head>
<body>
<input type="text" value="50px" id="txt1">
<input type="button" value="Влево" id="btn1">
<input type="button" value="Вправо" id="btn2">
<input type="button" value="Вверх" id="btn3">
<input type="button" value="Вниз" id="btn4"><br>
<div id="div1" class="cls1"><div>
</body>
</html>

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

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

В качестве примера рассмотрим изменение ширины элементов (листинг 7.3).

Листинг 7.3. Изменение ширины элементов

<!doctype html>
<html>
<head>
<title>Изменение ширины элементов</title>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script>
$(document).ready(function() {
   $("#btn1").click(function() {
      $("#div1").animate({ width: "hide" }, 300);
   });
   $("#btn2").click(function() {
      $("#div1").animate({ width: "show" }, 300);
   });
   $("#btn3").click(function() {
      $("#div1").animate({ width: "toggle" }, "slow");
   });
});
</script>
<style>
.cls1 {
   position:absolute;
   top:50px;
   left:10px;
   width:150px;
   height:100px;
   background-color:black;
}
</style>
</head>
<body>
<input type="button" value="Скрыть" id="btn1">
<input type="button" value="Отобразить" id="btn2">
<input type="button" value="Скрыть/Отобразить" id="btn3"><br>
<div id="div1" class="cls1"><div>
</body>
</html>

Если щелкнуть на кнопке Скрыть, то элемент свернется справа налево, а если затем щелкнуть на кнопке Отобразить, то он раскроется слева направо. Щелчок на кнопке Скрыть/Отобразить позволяет свернуть элемент (если он развернут) или развернуть (если он свернут).

В параметре <Эффект> могут быть указаны эффекты замедления из дополнительных модулей или два значения:

swing — в начале идет ускорение, а в конце замедление (значение по умолчанию);
linear — равномерная скорость движения.

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

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

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

{
   Опция1: "Значение1",
   Опция2: "Значение2",
   ...
   ОпцияN: "ЗначениеN"
}

Могут быть указаны следующие опции:

duration — время выполнения анимации в миллисекундах или значения fast, normal и slow;
easing — эффект замедления из дополнительных модулей или значения swing и linear;
complete — ссылка на функцию, которая будет вызвана после окончания анимации;
queue — если указано значение false, то текущая анимация будет выполнена параллельно с последующими анимациями. Если указано значение true (значение по умолчанию), то анимации, заданные для одного и того же элемента, выполняются последовательно (листинг 7.4).

Листинг 7.4. Параллельное и последовательное выполнение анимации

<!doctype html>
<html>
<head>
<title>Параллельное и последовательное выполнение анимации</title>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script>
$(document).ready(function() {
   $("#btn1").click(function() {
      $("#div1")
      .css({ width: "100px", height: "20px", fontSize: "10px" })
      .animate({ width: "450px", height: "100px" },
         { queue: false, duration: 2000 })
      .animate({ fontSize: "32px" }, 2000);
   });
   $("#btn2").click(function() {
      $("#div1")
      .css({ width: "100px", height: "20px", fontSize: "10px" })
      .animate({ width: "450px", height: "100px" },
         { duration: 2000 })
      .animate({ fontSize: "32px" }, 2000);
   });
});
</script>
<style>
.cls1 {
   position:absolute;
   top:50px;
   left:10px;
   width:100px;
   height:20px;
   background-color:white;
   border:black thin dotted;
   font-size:10px;
}
</style>
</head>
<body>
<input type="button" value="queue:false" id="btn1">
<input type="button" value="queue:true" id="btn2"><br>
<div id="div1" class="cls1">Текст<div>
</body>
</html>

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

Помощь сайту

Yandex-деньги: 410011140483022

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

Создание анимации

Помощь сайту

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