首页 > 其他 > 详细

动画队列操作

时间:2016-02-23 18:37:56      阅读:122      评论:0      收藏:0      [点我收藏+]

1、概述:

  关于动画我们已经俩接不少,但是用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. 初始执行第一个函数. 

动画队列操作

原文:http://www.cnblogs.com/shazhou-blog/p/5210587.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!