jquery动画函数队列
2012-07-31 12:52
375 查看
队列允许一个元素来异步的访问一连串的动作,而不终止程序执行。
queue 将函数加入、插入匹配元素的队列
dequeue 执行匹配元素的队列
queue( [ queueName ], newQueue )
queueName一个含有队列名的字符串。默认是"Fx",标准的动画队列。
newQueue一个替换当前函数列队内容的数组。
queue( [ queueName ], callback( next ) )
queueName一个含有队列名的字符串。默认是fx,标准的动画队列。
callback( next )添加到列队的新函数。
所以:当只传入一个参数时, 它返回并指向第一个匹配元素的队列(将是一个函数数组,队列名默认是fx); 当有两个参数传入时, 第一个参数还是默认为fx的的队列名, 第二个参数又分两种情况, 当第二个参数是一个函数时, 它将在匹配的元素的队列最后添加一个函数. 当第二个参数是一个函数数组时,它将匹配元素的队列用新的一个队列来代替(函数数组).
1. 当只传入一个参数时, 它返回并指向第一个匹配元素的队列(这是一个函数数组,队列名默认是fx的队列)
2.当传入两个参数时, 第一个参数为队列名(默认fx),当第二个参数是一个函数时, 它将在匹配的元素的队列最后添加一个函数。
当第二个参数是一个函数数组时,它将匹配元素的队列用新的一个队列来代替(函数数组)。
例如
example1
example2
example3
js
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() //执行匹配元素的队列 }) })
相关文章推荐
- jQuery动画高级用法(上)——详解animation中的.queue()动画队列插队函数
- 分享一些常用的jQuery动画事件和动画函数
- JQuery动画滑动函数
- JQuery 动画渲染函数animate使用心得
- JQuery动画函数总结
- jQuery中常用动画效果函数(日常整理)
- 用队列模拟jquery的动画算法
- jQuery使用动画队列自定义动画操作示例
- jquery中queue和dequeue函数队列的demo可以直接运行
- jQuery中队列queue()函数的实例教程
- jquery动画相关函数
- jQuery动画高级用法(上)——详解animation中的.queue()函数 http://www.cnblogs.com/hh54188/archive/2011/04/09/1996469.
- jQuery简单动画效果和动画队列
- jQuery数据篇-底层函数队列操作
- jquery.animate自定义动画的函数
- Jquery 动画函数详解
- 清除Jquery动画的队列
- <转>jQuery动画高级用法(上)——详解animation中的.queue()函数
- jQuery动画高级用法(上)——详解animation中的.queue()函数
- Jquery中关于动画的一些操作函数