PHP SQL
PHP SQL .ru
  Главная  Уроки  PHP  MySQL  jQuery  RegEx  CSS  Книги  Форум  
 Функции


  На главную

  Назад  Вперед

  Печать

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

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

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

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

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

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

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

<html>
<head>
<title>Прерывание анимации</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(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 рх, а если увеличивалась, то ее зна-чение станет равно 450 рх.

 
Предыдущая   На главную   Следующая          

Ваш комментарий:

'

Реклама на сайте | Обмен ссылками | Ссылки | Контакты
Добавить статью | Добавить исходник
2010-2014 © phpsql.ru