Содержание:
.queue( [имяОчереди] )Возвращает: Массив
Описание: Показать очередь функций, которые должны быть выполнены над выбранными элементами.
-
версия добавлена: 1.2.queue( [имяОчереди] )
- имяОчередиТип: СтрокаСтрока, содержащая имя очереди. По умолчанию
fx, стандартная очередь эффектов.
-
Пример:
Показать длину очереди.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>queue demo</title>
<style>
div {
margin: 3px;
width: 40px;
height: 40px;
position: absolute;
left: 0px;
top: 60px;
background: green;
display: none;
}
div.newcolor {
background: blue;
}
p {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<p>The queue length is: <span></span></p>
<div></div>
<script>
var div = $( "div" );
function runIt() {
div
.show( "slow" )
.animate({ left: "+=200" }, 2000 )
.slideToggle( 1000 )
.slideToggle( "fast" )
.animate({ left: "-=200" }, 1500 )
.hide( "slow" )
.show( 1200 )
.slideUp( "normal", runIt );
}
function showIt() {
var n = div.queue( "fx" );
$( "span" ).text( n.length );
setTimeout( showIt, 100 );
}
runIt();
showIt();
</script>
</body>
</html> Демо:
.queue( [имяОчереди], новаяОчередь )Возвращает: jQuery
Описание: Изменить очередь функций, которые должны быть выполнены один раз для каждого выбранного элемента.
-
версия добавлена: 1.2.queue( [имяОчереди], новаяОчередь )
-
версия добавлена: 1.2.queue( [имяОчереди], обработчик )
- имяОчередиТип: СтрокаСтрока, содержащая имя очереди. По умолчанию
fx, стандартная очередь эффектов. - обработчикНовая функция для добавления в очередь, с функцией для вызова, которая декьюит следующий элемент.
-
Каждый элемент может иметь одну или несколько очередей функций, присоединенных к нему jQuery. В большинстве приложений используется только одна очередь (называемая fx). Очереди позволяют вызывать последовательность действий для элемента асинхронно, не останавливая выполнение программы. Типичный пример - вызов нескольких методов анимации для элемента. Например:
$( "#foo" ).slideUp().fadeIn();
При выполнении этого оператора элемент сразу начинает свою анимацию сдвига, но переход с затемнением помещается в очередь fx для вызова только после завершения перехода сдвига.
Метод .queue() позволяет нам напрямую манипулировать этой очередью функций. Вызов .queue() с обратным вызовом особенно полезен; он позволяет поместить новую функцию в конец очереди. Функция обратного вызова выполняется один раз для каждого элемента в наборе jQuery.
Эта функция похожа на предоставление функции обратного вызова с методом анимации, но не требует, чтобы обратный вызов был предоставлен в момент выполнения анимации.
$( "#foo" ).slideUp();
$( "#foo" ).queue(function() {
alert( "Animation complete." );
$( this ).dequeue();
}); Это эквивалентно:
$( "#foo" ).slideUp(function() {
alert( "Animation complete." );
}); Обратите внимание, что при добавлении функции с .queue(), мы должны убедиться, что .dequeue() в конечном итоге будет вызван, чтобы следующая функция в очереди выполнялась.
Начиная с jQuery 1.4, функция, которая вызывается, получает другую функцию в качестве первого аргумента. При вызове это автоматически декьюит следующий элемент и продолжает перемещение очереди. Мы используем это так:
$( "#test" ).queue(function( next ) {
// Do some stuff...
next();
}); Примеры:
В очереди пользовательская функция.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>queue demo</title>
<style>
div {
margin: 3px;
width: 40px;
height: 40px;
position: absolute;
left: 0px;
top: 30px;
background: green;
display: none;
}
div.newcolor {
background: blue;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
Click here...
<div></div>
<script>
$( document.body ).on( "click", function() {
$( "div" )
.show( "slow" )
.animate( { left: "+=200" }, 2000 )
.queue(function() {
$( this ).addClass( "newcolor" ).dequeue();
})
.animate( { left: "-=200" }, 500 )
.queue(function() {
$( this ).removeClass( "newcolor" ).dequeue();
} )
.slideUp();
} );
</script>
</body>
</html> Демо:
Установить массив очереди для удаления очереди.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>queue demo</title>
<style>
div {
margin: 3px;
width: 40px;
height: 40px;
position: absolute;
left: 0px;
top: 30px;
background: green;
display: none;
}
div.newcolor {
background: blue;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<button id="start">Start</button>
<button id="stop">Stop</button>
<div></div>
<script>
$( "#start" ).on( "click", function() {
$( "div" )
.show( "slow" )
.animate({ left: "+=200" }, 5000 )
.queue(function() {
$( this ).addClass( "newcolor" ).dequeue();
})
.animate({ left: '-=200' }, 1500 )
.queue(function() {
$( this ).removeClass( "newcolor" ).dequeue();
})
.slideUp();
});
$( "#stop" ).on( "click", function() {
$( "div" )
.queue( "fx", [] )
.stop();
});
</script>
</body>
</html> 
