Версия для печати. Взято с сайта phpsql.ru

На главную   Назад   Вперед

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

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

• queue ([Название очереди] ) — возвращает массив функций в очереди. С помощью свойства length можно узнать количество анимаций в очереди.
alert($("#divl").queue().length);

• queue ( [Название очереди, ] Функция обратного вызова) — добавля-ет функцию в очередь. В качестве параметра Функция обратного вызова указывается ссылка на функцию следующего формата.
function Название функции() {
// ...
// Удаляем функцию из очереди после выполнения
$(this).dequeue();
}
Элемент, вызвавший событие, доступен внутри функции через указатель this.

• queue ([Название очереди, ]Новая очередь) — заменяет очередь всех элементов коллекции новой очередью (массивом функций). Очистить оче-редь можно так.
$ ("#divl") .queue( []);

• dequeue ( [Название очереди] ) — удаляет добавленную в очередь функ-цию после ее выполнения.

Необязательный параметр Название очереди во всех этих функциях по умолчанию имеет значение fx. Пример очистки очереди можно переписать следующим образом.
$("#divl") .queue ("fx", [] ) ;

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

<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() {
      var elem = $("#div1");
      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>
<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"><br>
<div id="div1" class="cls1">Текст<div>
</body>
</html>

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