Прерывание анимации

Если для одного элемента назначено несколько анимаций, то по умолчанию они выполняются по очереди. Пока не закончилась первая анимация, вторая не начнется. В случае если анимация применена к разным элементам, то она будет выполняться одновременно. Для досрочного прерывания анимации предназначен метод stop(). Форматы метода:

stop([<Очистка очереди>[, <Завершение анимации>]])
stop(<Название очереди>[, <Очистка очереди>[, <Завершение анимации>]])

Если параметры не указаны, то прерывается только текущая анимация. Иными словами, если в очереди несколько анимаций, то текущая анимация прервется и сразу начнется следующая.

Параметр <Очистка очереди> позволяет очистить очередь анимаций. Для этого необходимо указать значение true. Тогда прервется не только текущая анимация, но и все остальные.

В случае применения метода stop() без указания параметра <Завершение анимации> текущая анимация будет прервана и объект остановится в промежуточном состоянии. Если необходимо, чтобы анимация была сразу завершена и объект находился в конечном состоянии, тогда во втором параметре необходимо указать значение true.

Пример использования метода stop() приведен в листинге 2.5.

Листинг 2.5. Прерывание анимации

<!doctype html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <title>Прерывание анимации</title>
   <style>
   .cls1 {
      position: absolute;
      top: 50px;
      left: 10px;
      width: 450px;
      height: 100px;
      background-color: black;
   }
   </style>
</head>
<body>
   <input type="checkbox" id="chc1" checked> Прерывание анимации
   <input type="button" value="Скрыть" id="btn1">
   <input type="button" value="Отобразить" id="btn2">
   <input type="button" value="Остановить" id="btn3">
   <input type="button" value="Остановить все" id="btn4">
   <input type="button" value="Остановить все и завершить" id="btn5">
   <div id="div1" class="cls1"></div>

<script src="js/jquery.min.js"></script>
<script>
$(function() {
   $('#btn1').click( function() {
      if ( $('#chc1').is(':checked') ) {
         $('#div1').stop().animate({ width: '0.1px' }, 3000);
      }
      else {
         $('#div1').animate({ width: '0.1px' }, 3000);
      }
   });
   $('#btn2').click( function() {
      if ( $('#chc1').is(':checked') ) {
         $('#div1').stop().animate({ width: '450px' }, 3000);
      }
      else {
         $('#div1').animate({ width: '450px' }, 3000);
      }
   });
   $('#btn3').click( function() {
      $('#div1').stop();
   });
   $('#btn4').click( function() {
      $('#div1').stop(true);
   });
   $('#btn5').click( function() {
      $('#div1').stop(true, true);
   });
});
</script>
</body>
</html>

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

Чтобы увидеть различные нюансы применения метода stop(), сбросьте флажок и несколько раз щелкните на кнопках Скрыть и Отобразить, чтобы создать очередь анимаций. Если теперь щелкнуть на кнопке Остановить, то текущая анимация будет прервана и сразу начнется следующая. Если щелкнуть на кнопке Остановить все, то текущая анимация, а также все остальные анимации будут прерваны и объект остановится в промежуточном положении. Щелчок на кнопке Остановить все и завершить вызовет не только прерывание всех анимаций, но и полностью завершит текущую. Например, если ширина уменьшалась, то она сразу станет равна 0.1 px, а если увеличивалась, то ее значение станет равно 450 px.

Параметр <Название очереди> позволяет указать название очереди анимации, заданной с помощью опции queue (см. разд. 2.1.2). Если название не указано, то используется очередь по умолчанию с названием "fx". Пример очистки очереди из листинга 2.5 можно переписать следующим образом:

$('#div1').stop('fx', true);

Вместо вызова stop(true, true) можно использовать метод finish(). Он действует аналогично, но дополнительно устанавливает в конечное состояние значения всех атрибутов стиля для всех анимаций в очереди, а не только текущей анимации. Формат метода:

finish([<Название очереди>])

Пример использования метода finish() приведен в листинге 2.6.

Листинг 2.6. Метод finish()

<!doctype html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <title>Метод finish()</title>
   <style>
   .cls1 {
      position: absolute;
      top: 50px;
      left: 10px;
      width: 450px;
      height: 100px;
      background-color: black;
   }
   </style>
</head>
<body>
   <input type="button" value="Уменьшить" id="btn1">
   <input type="button" value="Увеличить" id="btn2">
   <input type="button" value="stop(true, true)" id="btn3">
   <input type="button" value="finish()" id="btn4">
   <div id="div1" class="cls1"></div>

<script src="js/jquery.min.js"></script>
<script>
$(function() {
   $('#btn1').click( function() {
      $('#div1').animate({ width: '10px' }, 3000)
                .animate({ height: '10px' }, 1000);
   });
   $('#btn2').click( function() {
      $('#div1').animate({ width: '450px' }, 3000)
                .animate({ height: '100px' }, 1000);
   });
   $('#btn3').click( function() {
      $('#div1').stop(true, true);
   });
   $('#btn4').click( function() {
      $('#div1').finish();
   });
});
</script>
</body>
</html>

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

Помощь сайту

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

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