Описание: Показывает очередь функций, которая должны выполняться на соответствующий элемент.
Аргументы
jQuery.queue( элемент, [ имяОчереди ] )
Добавлена в версию: 1.3
элемент
DOM элемент для проверки на вложенную очередь.
имяОчереди
Строка, содержащая имя очереди. По умолчанию fx, стандартная очередь эффектов.
Примечание:
Это метод нижнего уровня, вы должны, вероятно, использовать вместо этого
.queue().Пример
Показывает длину очереди в данный момент. $("#show").click(function () {
var n = $("div").queue("fx");
$("span").text("Queue length is: " + n.length);
});
function runIt() {
$("div").show("slow");
$("div").animate({left:'+=200'},2000);
$("div").slideToggle(1000);
$("div").slideToggle("fast");
$("div").animate({left:'-=200'},1500);
$("div").hide("slow");
$("div").show(1200);
$("div").slideUp("normal", runIt);
}
runIt();
Пример - Полный код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("#show").click(function () {
var n = $("div").queue("fx");
$("span").text("Queue length is: " + n.length);
});
function runIt() {
$("div").show("slow");
$("div").animate({left:'+=200'},2000);
$("div").slideToggle(1000);
$("div").slideToggle("fast");
$("div").animate({left:'-=200'},1500);
$("div").hide("slow");
$("div").show(1200);
$("div").slideUp("normal", runIt);
}
runIt();
});
</script>
<style>
div { margin:3px; width:40px; height:40px;
position:absolute; left:0px; top:30px;
background:green; display:none; }
div.newcolor { background:blue; }
span { color:red; }
</style>
</head>
<body>
<button id="show">Show Length of Queue</button>
<span></span>
<div></div>
</body>
</html>
Описание:
Манипулирует очередью функций, которая должна выполняться на соответствующий элемент.
Аргументы
jQuery.queue( элемент, имяОчереди, новаяОчередь )
Добавлена в версию: 1.3
элемент
Элемент DOM, к которому прилагается массив очереди функций.
имяОчереди
Строка, содержащая имя очереди. По умолчанию fx, стандартная очередь эффектов.
новаяОчередь
Набор функций для замены содержания текущей очереди.
jQuery.queue( элемент, имяОчереди,вызов())
Добавлена в версию: 1.3
элемент
Элемент DOM, на который добавляется функция в очереди.
queueName
Строка, содержащая имя очереди. По умолчанию fx, стандартная очередь эффектов.
вызов()
Новая функцию, чтобы добавить в очередь.
Примечание:
Это метод нижнего уровня, вы должны, вероятно, использовать вместо этого .queue().
Каждый элемент может иметь одно или несколько очередей из функций, предусмотренных для него jQuery.
В большинстве случаев, только одна очередь (называемая fx) используется.
Очередь позволяет выполнять последовательность действий на элемент в асинхронном режиме, без остановки выполнения программы.
Метод jQuery.queue() позволяет нам напрямую манипулировать этой очередью функций.
Вызов jQuery.queue() с обратным вызовом особенно полезен;
это позволяет нам размещать новые функции в конец очереди.
Обратите внимание, что при добавлении функции с jQuery.queue(), мы должны быть уверенны, что jQuery.dequeue()
в конечном итоге вызвана так, что следующая функция выполняется в соответствии.
Примеры
Пример 1
Ставит в очередь пользовательскую функцию.$(document.body).click(function () { $("div").show("slow"); $("div").animate({left:'+=200'},2000); $("div").queue(function () { $(this).addClass("newcolor"); $(this).dequeue(); }); $("div").animate({left:'-=200'},500); $("div").queue(function () { $(this).removeClass("newcolor"); $(this).dequeue(); }); $("div").slideUp(); });
Пример 1 - Полный код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$(document.body).click(function () {
$("div").show("slow");
$("div").animate({left:'+=200'},2000);
$("div").queue(function () {
$(this).addClass("newcolor");
$(this).dequeue();
});
$("div").animate({left:'-=200'},500);
$("div").queue(function () {
$(this).removeClass("newcolor");
$(this).dequeue();
});
$("div").slideUp();
});
});
</script>
<style>
div { margin:3px; width:40px; height:40px;
position:absolute; left:0px; top:30px;
background:green; display:none; }
div.newcolor { background:blue; }
</style>
</head>
<body>
Click here...
<div></div>
</body>
</html>
Пример 2
Задаётся массив, содержащий последовательность действий, для удаления текущей очереди. $("#start").click(function () {
$("div").show("slow");
$("div").animate({left:'+=200'},5000);
$("div").queue(function () {
$(this).addClass("newcolor");
$(this).dequeue();
});
$("div").animate({left:'-=200'},1500);
$("div").queue(function () {
$(this).removeClass("newcolor");
$(this).dequeue();
});
$("div").slideUp();
});
$("#stop").click(function () {
$("div").queue("fx", []);
$("div").stop();
});
Пример 2 - Полный код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("#start").click(function () {
$("div").show("slow");
$("div").animate({left:'+=200'},5000);
$("div").queue(function () {
$(this).addClass("newcolor");
$(this).dequeue();
});
$("div").animate({left:'-=200'},1500);
$("div").queue(function () {
$(this).removeClass("newcolor");
$(this).dequeue();
});
$("div").slideUp();
});
$("#stop").click(function () {
$("div").queue("fx", []);
$("div").stop();
});
});
</script>
<style>
div { margin:3px; width:40px; height:40px;
position:absolute; left:0px; top:30px;
background:green; display:none; }
div.newcolor { background:blue; }
</style>
</head>
<body>
<button id="start">Start</button>
<button id="stop">Stop</button>
<div></div>
</body>
</html>
Была ли эта информация полезной?
