Метод animate(): создание произвольной анимации

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

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

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

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

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

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

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

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

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

<!doctype html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <title>Передвижение элементов</title>
   <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">
   <div id="div1" class="cls1"></div>

<script src="js/jquery.min.js"></script>
<script>
$(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>
</body>
</html>

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

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

Если параметр <Продолжительность> не указан, то по умолчанию используется значение 400 миллисекунд. В качестве примера рассмотрим изменение ширины элементов (листинг 2.3).

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

<!doctype html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <title>Изменение ширины элементов</title>
   <style>
   .cls1 {
      position: absolute;
      top: 50px;
      left: 10px;
      width: 250px;
      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">
   <div id="div1" class="cls1"></div>

<script src="js/jquery.min.js"></script>
<script>
$(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>
</body>
</html>

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

В параметре <Закон анимации> можно указать значения swing (значение по умолчанию) и linear (равномерное изменение на всем протяжении действия) в виде строки. Пример указания значения linear:

$('#div1').animate({ width: 'toggle' }, 1000, 'linear');

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

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

Пример:

$('#div1').animate({ width: 'toggle' }, 1000, 'linear',
                   function() {
                      console.log('Анимация завершена');
                   });

В параметре <Объект с опциями> можно указать объект с настройками (см. разд. 2.1.2):

$('#div1').animate({ width: 'toggle', height: 'toggle' }, {
   duration: 1000,
   easing: 'linear',
   complete: function() {
      console.log('Анимация завершена');
   }
});

Если для одного элемента указано несколько анимаций, то они будут выполняться последовательно. Иными словами, пока не закончится первая анимация, вторая не начнется. Однако если для опции queue указано значение false, то текущая анимация будет выполнена параллельно с последующими анимациями (листинг 2.4).

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

<!doctype html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <title>Параллельное и последовательное выполнение анимации</title>
   <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">
   <div id="div1" class="cls1">Текст</div>
   
<script src="js/jquery.min.js"></script>
<script>
$(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>
</body>
</html>

Учебник по jQuery и AJAX
Учебник по jQuery и AJAX в формате PDF

Помощь сайту

ЮMoney (Yandex-деньги): 410011140483022

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