jquery动画函数队列(queue与dequeue用法示例)

发布时间:2020-08-30编辑:脚本学堂
有关jquery动画函数队列的用法,jquery中队列函数queue与dequeue的三个例子。

jquery中,队列允许一个元素来异步的访问一连串的动作,而不终止程序执行。

queue    将函数加入、插入匹配元素的队列
dequeue  执行匹配元素的队列

queue( [ queueName ], newQueue )
queueName一个含有队列名的字符串。默认是"Fx",标准的动画队列。
newQueue一个替换当前函数列队内容的数组。

queue( [ queueName ], callback( next ) )
queueName一个含有队列名的字符串。默认是fx,标准的动画队列。
callback( next )添加到列队的新函数。

所以:当只传入一个参数时, 它返回并指向第一个匹配元素的队列(将是一个函数数组,队列名默认是fx);
当有两个参数传入时,第一个参数还是默认为fx的的队列名, 第二个参数又分两种情况,当第二个参数是一个函数时,它将在匹配的元素的队列最后添加一个函数。

当第二个参数是一个函数数组时,它将匹配元素的队列用新的一个队列来代替(函数数组)。

1,当只传入一个参数时, 它返回并指向第一个匹配元素的队列(这是一个函数数组,队列名默认是fx的队列)
2,当传入两个参数时, 第一个参数为队列名(默认fx),当第二个参数是一个函数时, 它将在匹配的元素的队列最后添加一个函数。
当第二个参数是一个函数数组时,它将匹配元素的队列用新的一个队列来代替(函数数组)。

例1:
 

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

 
例2:
 

复制代码 代码示例:
$(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()
  })//执行队列
})
 

 
例3:
 

复制代码 代码示例:
$(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() //执行匹配元素的队列
})
})