jQuery支持数据队列,并通过定义queue()函数实现对队列的完整操作,这对于一系列需要按次序执行的函数特别有用。如:animate动画、Ajax异步请求和交互、timeout等需要一定时间的函数。
实际上,jQuery把队列看成是elem对象的数据缓存工具,但是它与data()函数实现的数据缓存存在很大差异,因为队列中存储的是将要被执行的一连串动作函数。
一、添加动画队列
queue():
把函数加入队列(一个函数数组);能够在匹配元素的队列最后添加一个函数,并调用该函数。
当为同一个元素设计连续动画时,如多次执行animate()方法,jQuery会自动将其加入名为fx的函数队列。
当需要对于多个元素依次执行动画,要用queue()手动设置队列。
jQuery.queue(element , queueName , newQueue)
jQuery.queue(element , queueName , callBack())
参数解释:
element:一个要附加队列函数的DOM元素,或一个已附加队列函数(数组)的DOM元素
queueName :一个含有队列名的字符串。默认:fx,标准的动画队列
newQueue:一个替换当前函数队列内容的数组
callBack():添加到队列的新函数
每个元素可以通过jQuery包含一个或多个函数队列
jQuery.queue()方法允许直接操纵这个函数队列,用一个回到函数访问jQuery.queue()特别有用,它让把新函数置入到队列的末端。
注意:当使用jQuery.queue()方法添加一个函数时,用户必须保证jQuery.dequeue()让下一个函数执行后被呼叫。
队列:“先进先出” FIFO
应用:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>添加动画队列</title>
<script src="js/jquery2.1.3.min.js"></script>
<script type="text/javascript">
$(function(){
var $div = $("div");
$("input").click(function(){
$div.slideDown("slow");
$div.animate({left:"+=400"},2000);
$div.queue(function(){ //在队列的末未添加一个函数
$(this).addClass("bg"); //调用该回调函数之后动画将停止
});
$div.animate({left:"-=400"},2000);
$div.queue(function(){
$(this).removeClass("bg");
});
$div.slideUp("slow");
});
});
</script>
<style type="text/css">
.bg{background: blue;}
div{position: absolute;width: 50px;height: 50px;background: red;left: 0;top:50px;display: none;}
</style>
</head>
<body>
<input type="button" value="动画演示">
<div></div>
</body>
</html>
二、显示动画队列
当为匹配的元素添加队列之后,可以使用queue()函数获取对该队列的引用
jQuery.queue(element , [queueName])
参数解释:
element:一个用于检查附加队列的DOM元素
queueName:一个含有队列名的字符串。默认:fx,标准的动画队列
这里的队列实际上就是一个函数数组,并能够自动连续执行。
应用:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>显示动画队列</title>
<script src="js/jquery2.1.3.min.js"></script>
<script type="text/javascript">
$(function(){
var $div = $("div");
$("input").click(function(){
$div.slideDown("slow");
$div.animate({left:"+=400"},2000);
$div.animate({left:"-=400"},2000);
$div.slideUp("slow");
var x = $div.queue(); //获取div元素默认的队列fx
alert(x.length); //显示fx队列包含的4个函数成员
});
});
</script>
<style type="text/css">
.bg{background: blue;}
div{position: absolute;width: 50px;height: 50px;background: red;left: 0;top:50px;display: none;}
</style>
</head>
<body>
<input type="button" value="动画演示">
<div></div>
</body>
</html>
如果匹配的元素不止一个则返回指向第一个匹配元素的队列。
三、更新动画队列
一个队列执行完毕后,可以用另一个队列进行替换
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>更新动画队列</title>
<script src="js/jquery2.1.3.min.js"></script>
<script type="text/javascript">
$(function(){
var $div = $("div");
$("input").eq(0).click(function(){ //默认的第一个动画序列,慢速动画
$div.slideDown("slow");
$div.animate({left:"+=400"},4000);
$div.animate({left:"-=400"},4000);
$div.slideUp("slow");
});
$div.queue("fa",function(next){ //自定义动画序列,块速动画
$div.slideDown("fast");
$div.animate({left:"+=400"},200);
$div.animate({left:"-=400"},200);
$div.slideUp("fast");
next(); //重要,不然执行fa不会有效果。next()是保证在执行完这次队列后再次执行下一个动画函数
});
var fa = $div.queue("fa"); //获取对自定义动画序列的引用
console.log(fa);
$("input").eq(1).click(function(){
$div.queue("fx",fa); //使用fa动画序列覆盖默认的fx动画序列
//$div.dequeue("fa") //功能:执行fa队列
});
});
</script>
<style type="text/css">
.bg{background: blue;}
div{position: absolute;width: 50px;height: 50px;background: red;left: 0;top:50px;display: none;}
</style>
</head>
<body>
<input type="button" value="执行慢速演示"/>
<input type="button" value="更新动画,执行快速演示"/>
<div></div>
</body>
</html>
注意:不是立即替换,前一个执行完,再继续后一个;
queue(name , queue)方法中如果第二个参数是一个空数组 [ ] ,则将会清除原来的动画序列。
四、删除动画序列
dequeue()函数:删除指定队列中最顶部的函数,并执行这个队列函数。实际上,dequeue()函数会是将函数数组中的第一个函数取出来,并执行这个函数。那么当再次执行dequeue()函数时,得到的是另一个函数。如果不执行dequeue(),则队列中的下一个函数将永远不会执行。包含一个参数,用来指定队列的名称,默认为fx。
应用:红色方块先右移,然后变蓝,然后左移,然后变红。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>删除动画队列</title>
<script src="js/jquery2.1.3.min.js"></script>
<script type="text/javascript">
$(function(){
var $div = $("div");
$("input").click(function(){
$div.slideDown("slow");
$div.animate({left:'+=400'},2000);
$div.queue(function(){
$(this).addClass("bg");
$(this).dequeue();
});
$div.animate({left:'-=400'},2000);
$div.queue(function(){
$(this).removeClass("bg");
$(this).dequeue(); //删除最顶部的函数,并继续执行队列
});
$div.slideUp("slow");
});
});
</script>
<style type="text/css">
.bg{background: blue;}
div{position: absolute;width: 50px;height: 50px;background: red;left: 0;top: 50px;display: none;}
</style>
</head>
<body>
<input type="button" value="动画演示"/>
<div></div>
<div></div>
</body>
</html>