Содержание:
jQuery.queue( элемент [, имя очереди ] )Возвращает: Массив
Описание: Показать очередь функций, которые должны быть выполнены на совпавшем элементе.
-
версия добавлена: 1.3jQuery.queue( элемент [, имя очереди ] )
Примечание: Это метод низкого уровня, вы, вероятно, должны использовать .queue() вместо него.
Пример:
Показать длину очереди.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.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;
}
span {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<button id="show">Show Length of Queue</button>
<span></span>
<div></div>
<script>
$( "#show" ).on( "click", function() {
var n = jQuery.queue( $( "div" )[ 0 ], "fx" );
$( "span" ).text( "Queue length is: " + n.length );
});
function runIt() {
$( "div" )
.show( "slow" )
.animate({
left: "+=200"
}, 2000 )
.slideToggle( 1000 )
.slideToggle( "fast" )
.animate({
left: "-=200"
}, 1500 )
.hide( "slow" )
.show( 1200 )
.slideUp( "normal", runIt );
}
runIt();
</script>
</body>
</html> Демо:
jQuery.queue( элемент, имя очереди, новая очередь )Возвращает: Массив
Описание: Манипулировать очередью функций, которые должны быть выполнены на совпавшем элементе.
-
версия добавлена: 1.3jQuery.queue( элемент, имя очереди, новая очередь )
-
версия добавлена: 1.3jQuery.queue( элемент, имя очереди, обратный вызов )
Примечание: Это метод низкого уровня, вы, вероятно, должны использовать .queue() вместо него.
Каждый элемент может иметь одну или несколько очередей функций, прикрепленных к нему с помощью jQuery. В большинстве приложений используется только одна очередь (называемая fx). Очереди позволяют вызывать последовательность действий на элементе асинхронно, не останавливая выполнение программы.
Метод jQuery.queue() позволяет нам напрямую манипулировать этой очередью функций. Вызов jQuery.queue() с обратным вызовом особенно полезен; он позволяет нам поместить новую функцию в конец очереди.
Обратите внимание, что при добавлении функции с jQuery.queue(), мы должны убедиться, что jQuery.dequeue() в конечном итоге вызывается, чтобы следующая функция в очереди выполнялась.
Примеры:
Очередь пользовательской функции.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.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() {
var divs = $( "div" )
.show( "slow" )
.animate({ left: "+=200" }, 2000 );
jQuery.queue( divs[ 0 ], "fx", function() {
$( this ).addClass( "newcolor" );
jQuery.dequeue( this );
} );
divs.animate({ left: "-=200" }, 500 );
jQuery.queue( divs[ 0 ], "fx", function() {
$( this ).removeClass( "newcolor" );
jQuery.dequeue( this );
} );
divs.slideUp();
} );
</script>
</body>
</html> Демо:
Установить массив очереди для удаления очереди.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.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() {
var divs = $( "div" )
.show( "slow" )
.animate({ left: "+=200" }, 5000 );
jQuery.queue( divs[ 0 ], "fx", function() {
$( this ).addClass( "newcolor" );
jQuery.dequeue( this );
});
divs.animate({ left: "-=200" }, 1500 );
jQuery.queue( divs[ 0 ], "fx", function() {
$( this ).removeClass( "newcolor" );
jQuery.dequeue( this );
});
divs.slideUp();
});
$( "#stop" ).on( "click", function() {
jQuery.queue( $( "div" )[ 0 ], "fx", [] );
$( "div" ).stop();
});
</script>
</body>
</html> 
