動畫隊列操做

時間 2019-11-12

標籤動畫隊列简体版

原文原文鏈接

一、概述：javascript

　　關於動畫咱們已經倆接很多，可是用jquery讓動畫按照順序執行的時候，這就涉及到動畫隊列的問題。前端

二、相關代碼：java

<!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>

三、代碼簡要闡述：jquery

　　jQuery核心中, 有一組隊列控制方法，這組方法由queue()/dequeue()/clearQueue()三個方法組成，它對須要連續按序執行的函數的控制能夠說是簡明自如，主要應用於animate ()方法,，ajax以及其餘要按時間順序執行的事件中。ajax

　　queue(name,[callback]): 當只傳入一個參數時，它返回並指向第一個匹配元素的隊列(將是一個函數數組,隊列名默認是fx)；當有兩個參數傳入時，第一個參數仍是默認爲fx的的隊列名，第二個參數又分兩種狀況，當第二個參數是一個函數時，它將在匹配的元素的隊列最後添加一個函數。當第二個參數是一個函數數組時，它將匹配元素的隊列用新的一個隊列來代替(函數數組)。數組

　　dequeue(name): 這個好理解, 就是從隊列最前端移除一個隊列函數，並執行它。
clearQueue([queueName]):這是1.4新增的方法. 清空對象上還沒有執行的全部隊列。參數可選,默認爲fx，但我的以爲這個方法沒多大用,，用queue()方法傳入兩個參數的第二種參數便可實現clearQueue方法。ide

　　1. 新建一個數組,把動畫函數依次放進去(這樣更改順序,新加動畫是否是方便多了?);
　　2. 用queue將這組動畫函數數組加入到slideList隊列中;
　　3. 用dequeue取出slideList隊列中第一個函數, 並執行它;
　　4. 初始執行第一個函數. 函數

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。