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

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

2012-12-12 20:28 756 查看
/article/5960192.html

<!doctype html>
<html>
<head>
<meta charset="gbk">
<title>jQuery队列控制方法详解queue()/dequeue()/clearQueue()</title>
<link rel="stylesheet" href="http://mrthink.net/demo/css/base.css" />
<style>
input{margin:10px 0 10px 50px;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><!--DEMO start--><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><!--DEMO end--><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script><script> $(function(){ var _slideFun=[ //把要执行的动画依次放入一个数组 function(){$('.one').delay(500).animate({top:'+=290px'},500,_takeOne);}, function(){$('.two').delay(300).animate({top:'+=290px'},500,_takeOne);}, function(){$('.three').delay(300).animate({top:'+=290px'},500,_takeOne);}, function(){$('.four').delay(300).animate({top:'+=290px'},500,_takeOne);}, function(){$('.five').delay(300).animate({top:'+=290px'},500,_takeOne);}, function(){$('.six').delay(300).animate({top:'+=290px'},500,_takeOne);}, function(){$('.seven').delay(300).animate({top:'+=290px'},500,function(){ alert('按序落体运动结束! Yeah!'); });} ]; //将函数数组放入slideList动画队列 $('#demo').queue('slideList',_slideFun); var _takeOne=function(){ //取出第一个函数,并执行它 $('#demo').dequeue('slideList'); }; //初始执行第一个函数 _takeOne(); $(':button').click(function(){ $(this).val('刷新重试').attr('disabled',true).css('color','#ccc'); //停止也可用载入空数组实现$('#demo').queue('slideList',[]); $('#demo').clearQueue('slideList'); }); }); </script></body></html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航