动画队列操作
2016-02-23 17:12
204 查看
1、概述:
关于动画我们已经俩接不少,但是用jquery让动画按照顺序执行的时候,这就涉及到动画队列的问题。
2、相关代码:
3、代码简要阐述:
jQuery核心中, 有一组队列控制方法,这组方法由queue()/dequeue()/clearQueue()三个方法组成, 它对需要连续按序执行的函数的控制可以说是简明自如,主要应用于animate ()方法,,ajax以及其他要按时间顺序执行的事件中。
queue(name,[callback]): 当只传入一个参数时,它返回并指向第一个匹配元素的队列(将是一个函数数组,队列名默认是fx); 当有两个参数传入时, 第一个参数还是默认为fx的的队列名,第二个参数又分两种情况,当第二个参数是一个函数时,它将在匹配的元素的队列最后添加一个函数。 当第二个参数是一个函数数组时,它将匹配元素的队列用新的一个队列来代替(函数数组)。
dequeue(name): 这个好理解, 就是从队列最前端移除一个队列函数,并执行它。
clearQueue([queueName]):这是1.4新增的方法. 清空对象上尚未执行的所有队列。参数可选,默认为fx, 但个人觉得这个方法没多大用,,用queue()方法传入两个参数的第二种参数即可实现clearQueue方法。
1. 新建一个数组,把动画函数依次放进去(这样更改顺序,新加动画是不是方便多了?);
2. 用queue将这组动画函数数组加入到slideList队列中;
3. 用dequeue取出slideList队列中第一个函数, 并执行它;
4. 初始执行第一个函数.
// 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);},
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);},
function(){$('.seven').delay(300).animate({top:'+=270px'},500,_takeOne);}
];
$('#demo').queue('slideList',_slideFun);
var _takeOne=function(){
$('#demo').dequeue('slideList');
setTimeout("_takeOne",10);
};
$(document).ready(_takeOne());
// ]]>
关于动画我们已经俩接不少,但是用jquery让动画按照顺序执行的时候,这就涉及到动画队列的问题。
2、相关代码:
<!DOCTYPE HTML > <HTML> <HEAD> <TITLE> By ShaZhou </TITLE> </HEAD> <style> #demo div{ width:100px; height:100px; background:red; position:absolute; } </style> <BODY> <div id="demo"> <div class="one"></div> <div class="two"></div> <div class="three"></div> <div class="four"></div> <div class="five"></div> <div class="six"></div> <div class="seven"></div> </div> <script type="text/javascript" src="jquery-1.11.3.js"></script> <script type="text/javascript"> 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);}, 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);}, function(){$('.seven').delay(300).animate({top:'+=270px'},500,_takeOne);} ]; $('#demo').queue('slideList',_slideFun); var _takeOne=function(){ $('#demo').dequeue('slideList'); setTimeout("_takeOne",10); }; $(document).ready(_takeOne()); </script> </BODY> </HTML>
3、代码简要阐述:
jQuery核心中, 有一组队列控制方法,这组方法由queue()/dequeue()/clearQueue()三个方法组成, 它对需要连续按序执行的函数的控制可以说是简明自如,主要应用于animate ()方法,,ajax以及其他要按时间顺序执行的事件中。
queue(name,[callback]): 当只传入一个参数时,它返回并指向第一个匹配元素的队列(将是一个函数数组,队列名默认是fx); 当有两个参数传入时, 第一个参数还是默认为fx的的队列名,第二个参数又分两种情况,当第二个参数是一个函数时,它将在匹配的元素的队列最后添加一个函数。 当第二个参数是一个函数数组时,它将匹配元素的队列用新的一个队列来代替(函数数组)。
dequeue(name): 这个好理解, 就是从队列最前端移除一个队列函数,并执行它。
clearQueue([queueName]):这是1.4新增的方法. 清空对象上尚未执行的所有队列。参数可选,默认为fx, 但个人觉得这个方法没多大用,,用queue()方法传入两个参数的第二种参数即可实现clearQueue方法。
1. 新建一个数组,把动画函数依次放进去(这样更改顺序,新加动画是不是方便多了?);
2. 用queue将这组动画函数数组加入到slideList队列中;
3. 用dequeue取出slideList队列中第一个函数, 并执行它;
4. 初始执行第一个函数.
// 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);},
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);},
function(){$('.seven').delay(300).animate({top:'+=270px'},500,_takeOne);}
];
$('#demo').queue('slideList',_slideFun);
var _takeOne=function(){
$('#demo').dequeue('slideList');
setTimeout("_takeOne",10);
};
$(document).ready(_takeOne());
// ]]>
相关文章推荐
- eclipse 快捷键Alt+/ 不能补充syso
- 7个你可能不认识的CSS单位:rem vh vw vmin vmax ex ch
- 2016-02-23 数组第一个元素添加...第一个元素
- Windbg条件断点之字符串比较
- word为图片添加题注,自动编号
- 22.UIButton的标题和图片位置的调整/Image和BackgroundImage
- Error“Cannot change version of project facet Dynamic web module to 2.5”导致Tomcat无法启动解决办法
- CSS3笔记
- position&containing block
- StringUtil
- Oracle利用dbms_metadata.get_ddl查看DDL语句
- linux mysql 数据库开启外部访问设置指南
- 老款macbookpro升级OSX10.11 Ei Captain那点事
- iOS内存问题的分析和解决
- behemoth - 01
- linux上安装ldap服务
- Spring依赖注入(DI)
- C++及C中的 string char指针及char数组
- EDM制作要点
- Android APK反编译就这么简单 详解(附图)