.queue()
返回: Array
.queue( [queueName ] )
描述：显示要在匹配的元素上执行的函数队列。
示例
显示队列的长度。
<!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-1.10.2.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>
演示结果
返回: jQuery
.queue( [queueName ] )
描述：操纵要在匹配的元素上执行的函数队列，一次只针对一个匹配的元素。
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-1.10.2.js"></script>
</head>
<body>
Click here...
<div></div>
<script>
$( document.body ).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-1.10.2.js"></script>
</head>
<body>
<button id="start">Start</button>
<button id="stop">Stop</button>
<div></div>
<script>
$( "#start" ).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" ).click(function() {
$( "div" )
.queue( "fx", [] )
.stop();
});
</script>
</body>
</html>
演示结果