Управление очередью анимаций

Для управления очередью анимаций предназначены следующие методы:

  • queue([<Название очереди>]) — возвращает массив анимаций в очереди. С помощью свойства length можно узнать количество анимаций в очереди:
console.log($('#div1').queue().length);
  • queue([<Название очереди>, ]<Функция обратного вызова>) — добавляет функцию в очередь. В качестве параметра <Функция обратного вызова> указывается ссылка на функцию следующего формата:
function <Название функции>([next]) {
   // ...
   $(this).dequeue();
}

Элемент, к которому применяется анимация, доступен внутри функции через указатель this. Через параметр next доступна ссылка на метод dequeue():

function <Название функции>(next) {
   // ...
   next();
}
  • queue([<Название очереди>, ]<Новая очередь>) — заменяет очередь всех элементов коллекции новой очередью (массивом функций). Очистить очередь можно так:
$('#div1').queue([]);
  • clearQueue([<Название очереди>]) — очищает очередь анимаций:
$('#div1').clearQueue();
  • dequeue([<Название очереди>]) — удаляет добавленную в очередь функцию после ее выполнения.

Необязательный параметр <Название очереди> во всех этих методах по умолчанию имеет значение "fx". Пример очистки очереди можно переписать следующим образом:

$('#div1').clearQueue('fx');

Пример добавления функции в очередь приведен в листинге 2.7.

Листинг 2.7. Добавление функции в очередь

<!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="Показать" id="btn1">
   <div id="div1" class="cls1">Текст</div>

<script src="js/jquery.min.js"></script>
<script>
$(function() {
   $('#btn1').click( function() {
      var elem = $('#div1');
      elem.clearQueue().stop();
      elem.css({ width: '100px', height: '20px', fontSize: '10px' });
      elem.text('Текст');
      elem.animate({ width: '450px', height: '100px' }, 2000);
      elem.queue( function() {
          $(this).text('Наш новый текст').dequeue();
      });
      elem.animate({ fontSize: '32px' }, 2000);
   });
});
</script>
</body>
</html>

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

Помощь сайту

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

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