您的位置：首页 > Web前端 > JQuery

jQuery队列控制方法详解queue()/dequeue()/clearQueue()

2015-05-21 14:19 375 查看
jQuery核心中, 有一组队列控制方法, 这组方法由queue()/dequeue()/clearQueue()三个方法组成,
它对需要连续按序执行的函数的控制可以说是简明自如, 主要应用于animate ()方法, ajax以及其他要按时间顺序执行的事件中.

先解释一下这组方法各自的含义.

queue(name,[callback]): 当只传入一个参数时,
它返回并指向第一个匹配元素的队列(将是一个函数数组,队列名默认是fx); 当有两个参数传入时, 第一个参数还是默认为fx的的队列名, 第二个参数又分两种情况, 当第二个参数是一个函数时, 它将在匹配的元素的队列最后添加一个函数. 当第二个参数是一个函数数组时,它将匹配元素的队列用新的一个队列来代替(函数数组).可能, 这个理解起来有点晕, 稍后, 后面会有点此查看DEMO.

dequeue(name): 这个好理解,
就是从队列最前端移除一个队列函数, 并执行它.

clearQueue([queueName]):这是1.4新增的方法.
清空对象上尚未执行的所有队列. 参数可选,默认为fx. 但个人觉得这个方法没多大用, 用queue()方法传入两个参数的第二种参数即可实现clearQueue方法.

现在, 我们要实现这样一个效果, 有标有1至7的数字方块, 要求这七个方块自左到右依次下落.点此查看DEMO

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<style>body,input{letter-spacing:1px;font:12px/1.5 tahoma,arial,\5b8b\4f53}
div,h2,p,input,select{margin:0;padding:0}
input{vertical-align:middle}
h1{font-size:1em;font-weight:normal}
h1 a{background:#047;padding:2px 3px;color:#fff;text-decoration:none}
h1 a:hover{background:#a40000;color:#fff;text-decoration:underline}
h3{color:#888;font-weight:bold;font-size:1em;margin:1em auto;position:relative}
input{margin:10px 0 10px 20px;padding:3px 8px;font-size:14px;font-weight:bolder;}
#demo{position:relative;width:630px;height:300px;background:#eee;border-top:5px solid #888;border-bottom:5px solid #888}
.one,.two,.three,.four,.five,.six,.seven{display:block;position:absolute;left:30px;top:0;width:30px;height:30px;background:#888;color:#fff;text-align:center;font-weight:bold;line-height:30px}
.two{left:120px}.three{left:210px}.four{left:300px}.five{left:390px}.six{left:480px}.seven{left:570px}
</style>
</head>
<body>
<h1><a href="http://mrthink.net/">Mr.Think的个人博客</a><br/>@专注前端技术,热爱PHP,崇尚简单生活.</h1>
<h3>返回文章页:<a href="http://mrthink.net/jqueryapi-queue-dequeue/">jQuery队列控制方法详解queue()/dequeue()/clearQueue()@Mr.Think</a></h3>

<input type="button" value="停止动画"/>
<div id="demo">
<span class="one">01</span>
<span class="two">02</span>
<span class="three">03</span>
<span class="four">04</span>
<span class="five">05</span>
<span class="six">06</span>
<span class="seven">07</span>
</div>
<script type="text/javascript" src="js/jquery-2.1.3.min.js" ></script>
<!--<script data-rocketsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/rocketscript"></script>-->
<script>
$(function(){
//可用animate()方法如此眩晕地实现
//	$('.one').delay(500).animate({top:'+=270px'},500,function(){
//		$('.two').delay(500).animate({top:'+=270px'},500,function(){
//			$('.three').delay(500).animate({top:'+=270px'},500,function(){
//				$('.four').delay(500).animate({top:'+=270px'},500,function(){
//					$('.five').delay(500).animate({top:'+=270px'},500,function(){
//						$('.six').delay(500).animate({top:'+=270px'},500,function(){
//							$('.seven').animate({top:'+=270px'},500,function(){
//								alert('按序落体运动结束! Yeah!')
//							});
//						});
//					});
//				});
//			});
//		});
//	});
//还可以利用queue()方法简明自如的实现
var _slideFun=[
//把要执行的动画依次放入一个数组
function(){$('.one').delay(500).animate({top:'+=270px'},500,_takeOne);},
function(){$('.two').delay(300).animate({top:'+=270px'},500,_takeOne);},
function(){$('.three').delay(300).animate({top:'+=270px'},500,_takeOne);},
function(){$('.four').delay(300).animate({top:'+=270px'},500,_takeOne);},
function(){$('.five').delay(300).animate({top:'+=270px'},500,_takeOne);},
function(){$('.six').delay(300).animate({top:'+=270px'},500,_takeOne);}
];
var _zts = [
//把要执行的动画依次放入一个数组
function(){$('.one').delay(500).animate({top:'+=270px'},500,tz);},

function(){$('.three').delay(300).animate({top:'+=270px'},500,tz);},
function(){$('.five').delay(300).animate({top:'+=270px'},500,tz);},
function(){$('.four').delay(300).animate({top:'+=270px'},500,tz);},
function(){$('.two').delay(300).animate({top:'+=270px'},500,tz);},
function(){$('.six').delay(300).animate({top:'+=270px'},500,tz);},
function(){$('.seven').delay(300).animate({top:'+=270px'},500,function(){
alert('按序落体运动结束! Yeah!');
});}
];
//将函数数组放入slideList动画队列
$('#demo').queue('slideList',_zts);
var _takeOne=function(){
//取出第一个函数,并执行它
$('#demo').dequeue('slideList');

};
var tz = function(){
$("#demo").dequeue("slideList");
}
tz();
//初始执行第一个函数
//_takeOne();

$(':button').click(function(){
$(this).val('刷新重试').attr('disabled',true).css('color','#ccc');
//停止也可用载入空数组实现$('#demo').queue('slideList',[]);
$('#demo').clearQueue('slideList');
});
});
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航