Методы управления очередью анимаций

Для управления очередью анимаций предназначены следующие методы.
• queue ([<Название очередu>] ) — возвращает массив функций в очереди. С помощью свойства length можно узнать количество анимаций в очереди.


alert($("#div1").queue().length);

• queue ([<Название очередu>, ] <Функция обратного вызова>) — добавляет функцию в очередь. В качестве параметра <Функция обратного вызова> указывается ссылка на функцию следующего формата.

function <Название функции>() {
// ...
}

// Удаляем функцию из очереди после выполнения

$(this).dequeue();
}

Элемент, вызвавший событие, доступен внутри функции через указатель this.

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

$("#div1").queue([]);

• dequeue ( [<Название очередu>] ) — удаляет добавленную в очередь функцию после ее выполнения.
Необязательный параметр <Название очередu> во всех этих функциях по умолчанию имеет значение fх. Пример очистки очереди можно переписать следующим образом. $("#div1").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>

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *