jquery動畫函數隊列

隊列允許一個元素來異步的訪問一連串的動作，而不終止程序執行。
queue    將函數加入、插入匹配元素的隊列
dequeue  執行匹配元素的隊列

 

queue( [ queueName ], newQueue )
queueName一個含有隊列名的字符串。默認是"Fx"，標准的動畫隊列。
newQueue一個替換當前函數列隊內容的數組。

 

queue( [ queueName ], callback( next ) )
queueName一個含有隊列名的字符串。默認是fx，標准的動畫隊列。
callback( next )添加到列隊的新函數。

所以：當只傳入一個參數時, 它返回並指向第一個匹配元素的隊列(將是一個函數數組,隊列名默認是fx); 當有兩個參數傳入時, 第一個參數還是默認為fx的的隊列名, 第二個參數又分兩種情況, 當第二個參數是一個函數時, 它將在匹配的元素的隊列最后添加一個函數. 當第二個參數是一個函數數組時,它將匹配元素的隊列用新的一個隊列來代替(函數數組).

1. 當只傳入一個參數時, 它返回並指向第一個匹配元素的隊列(這是一個函數數組,隊列名默認是fx的隊列)
2.當傳入兩個參數時， 第一個參數為隊列名（默認fx），當第二個參數是一個函數時, 它將在匹配的元素的隊列最后添加一個函數。
當第二個參數是一個函數數組時,它將匹配元素的隊列用新的一個隊列來代替(函數數組)。

例如

example1

 $(".tt").click(function () {
                var $this = this
                $(this).animate({left:400}).queue(function () {
                    window.setTimeout(function () {
                        $($this).dequeue()
                    }, 2000)
                }).animate({top:400})

 

 example2

        $(document).ready(function () {
            function next() {
                $(".main").dequeue("dd")
            }

            var _funclist = [

                function () {
                    $(".block1").animate({left:"+=100"}, next)
                },
                function (){
                    $(".block1").html("kitty")
                    window.setTimeout(function(){next()},1000)
                },
                function () {
                    $(".block2").animate({left:"+=100"}, next)
                },
                function (){
                    $(".block2").html("kitty")
                    window.setTimeout(function(){next()},1000)
                },
                function () {
                    $(".block3").animate({left:"+=100"}, next)
                },
                function (){
                    $(".block3").html("kitty")
                    window.setTimeout(function(){next()},1000)
                },
                function () {
                    $(".block4").animate({left:"+=100"}, next)
                },
                function (){
                    $(".block4").html("kitty")
                    window.setTimeout(function(){next()},1000)
                },
                function () {
                    $(".block5").animate({left:"+=100"}, next)
                },
               function(){
                   alert("done")
               }
            ]//建立函數數組
            $(".main").queue("dd", _funclist)//將函數數組插入匹配元素的的隊列dd

          $(document).click(function(){
              next()
          })//執行隊列
        })

 

 

 example3

js

  $(document).ready(function () {
            function next() {
                $(".main").dequeue("slidelist")
            }
            var arry = []
            $(".main div").each(function () {
                var $this = $(this)
                var k = function () {
                    $this.animate({left:"+=100"},function(){
                        $this.html($this.prevAll().length)
                        next() //回調函數執行隊列調出下一個動作
                    })
                }
                arry.push(k) //遍歷生成函數數組
            })
            $(".main").queue("slidelist", arry)  //將函數數組添加到匹配元素的隊列，隊列名為slidelist
            
 
 $(document).click(function(){
	 next() //執行匹配元素的隊列
	 })
        })