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

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

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

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

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

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

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

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

<!doctype html>
<html>
<head>
<title>Прерывание анимации</title>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script>
$(document).ready(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>
<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"><br>
<div id="div1" class="cls1"><div>
</body>
</html>

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

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

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