jQuery动画序列
**这里写代码片JQuery中的动画序列queue(),dequeue(),和stop() 如下例: div.show("slow").animate({left:'+=300'},2000).slideToggle(1000).animate({left:'-=300'},1500).hide("slow").slideUp("normal", runIt); 此时div的动画先从左向右移动,在右侧隐藏后先发生转移到左边再显示出来,而我们所希望的是移动到右侧后消失、显示再移动到左侧 那明明我们是按顺序写的,为什么会出现这个问题呢? 其实,当你使用一系列的动画效果(如hide,show),这些动画函数都会被放进一个名为"fx"的队列中,然后在以先进先出的方式执行队列中的函数,而非动画函数,比如上面例子中的slideToggle()函数,则是不会进入这个队列中,并且先于动画函数的执行,也就是在"fx"先进先出,取出第一个函数之前,它就已经执行了。 那如果写一个白色方块,先收起(slideUp),在放下(SlideDown),背景再变成白色,应该不会写成 $('div').slideUp('slow').slideDown('slow').css({"background":"red"}); 而是应该使用queue函数 $('div').slideUp('slow').slideDown('slow').queue(function(next){ $('#object').css({"background":"red"}); next(); }); 首先,我们又要回到.queue()的函数定义,其实我们现在这种在queue中加入函数的用法,官方给出的函数原型是: queue( [ queueName ], callback( next ) ) 也就是说我们加入的函数其实是一个关于队列的回调函数。也就是在队列结束之后,系统会自动为你调用你加入的函数。(补充一下,关于回调函数:自己定义,系统调用。回调函数的关键在于我们无法预知它何时被调用。因为我们只是定义了这么一个函数,可能通知系统在完成某一系列的动作后来调用它。) 其实我们可以这样考虑,如果把这个函数作为slideDown的回调函数效果不都是一样的吗?因为我们最终想要的只是保证变色函数在slideDown之后执行,slideDown和queue的回调函数都能保证这种效果! $('div').slideUp('slow').slideDown('slow',function(){ $('#object').css({"background":"red"}); }); 这二者有异曲同工之妙 还有一点要注意的是.queue()中的next参数和next()能不能舍去其一? 我们上面说到queue中的函数是回调函数,如果我们稍稍对上上面的代码做一些修改,比如: $('div').slideUp('slow').slideDown('slow').queue(function(next){ $('#object').css({"background":"red"}); //next(); }).hide('slow'); 一是我把next()语句注释掉了,二是希望在变色以后再让方块隐藏起来。但是当你运行之后,发现在变色之后无法对方块执行隐藏。 要记住queue中的函数是回调函数呀,默认情况下只有动画队列执行完了,才会调用变色函数,既然动画队列都执行完了,哪里来的hide()?所以next()是保证在执行完这次队列后再次执行下一个动画函数 我曾经尝试过抛弃next参数而保留next()语句,这样的结果是能在现代浏览器(firefox,chrome之类)中运行,但无法在ie6中运行。所以,保留吧 。next和next()是jquery1.4中才开始出现的,而在之前使用的是.dequeue()函数,如果要将这节的例子改为使用dequeue(),如下: $('#object').slideUp('slow').slideDown('slow').queue(function(){ $('#object').css({"background":"red"}); $(this).dequeue(); }); 自定义队列 建立一个名为'custom'的队列,里面有一个能使黑色小方块改变背景颜色的方法,如下: $("div").queue("custom", function(next) { $('div').css({'background':'red'}); next(); }); 但就这段代码而已,待你真正添加进网页,并且尝试运行,会发现并非“所见即所得”,压根就不会有任何效果。因为......: $("div").queue("custom", function(next) { $('div').css({'background':'red'}); next(); }) .dequeue("custom"); //this is the key 对,就是这句,.dequeue("custom")。一般对与dequeue()的定义是“删除队列中最顶部的函数,并且执行它”。我并不赞同用“删除”这个字眼,而是倾向于“取出”,其实这个函数的功能就好像是一个数据结构中队列的指针,待队列中前一个函数执行完后,取下一个队列最顶端的函数。(不是很明白) 现在需求如下 :在2000毫秒的时间内,物体的高度一致在均匀变化,逐渐减小,而不透明度在前1000毫秒始终保持为1.0,而在后1000毫秒才逐渐减小直至完全为0。 如果我们暂且只考虑向上浮动和透明效果,我们可能会写出这样的语句: $("#object").animate({opacity: 0, top: "-=40"}, {duration: 2000}); 很遗憾,这样的语句只能让物体在整体2000毫秒中都处于逐渐向不透明转化的过程,也就是不能让它在前1000毫秒中保持100%不透明——于是我们用queue来解决这个问题: $("#object") .delay(1000, "fader") .queue("fader", function(next) { $(this).animate({opacity: 0}, {duration: 1000, queue: false}); next(); }) .dequeue("fader") .animate({top: "-=40"}, {duration: 2000}) 我们先来看它的思路:把控制不透明度和控向上移动的动画分别存储在两个队列中,控制向上移动的队列按默认情况进行(在2000毫秒内完成),而不透明度的控制在1000毫秒内执行,但这个队列要晚于默认队列1000毫秒执行,再简单一点,就是:前1000毫秒,只有控制高度的“fx”队列执行,而后1000毫秒,控制不透明度的“fader”队列和控制高度的“fx”并行 首先准备两个队列,一个是默认的"fx",存储高度变化动画: .animate({top: "-=40"}, {duration: 2000}) 用来另一个是自定义的"fader"的队列,来存储不透明度变化的动画: .animate({opacity: 0}, {duration: 1000, queue: false}); 注意上面这段代码中的"queue:false",这是很关键的一句话,目的是让这个animate不进入默认的"fx"队列中,任何的动画效果都会进入"fx"队列中,即使你定义在.queue()中的动画也是一样,并且动画效果,务必会按顺序执行,比如说下面这段代码: $('#object').slideUp(1000)<br> .slideDown(1000)<br> .animate({width: '50px'}, {duration: 1000}); 运行后它只会按照顺序来执行,先收起,再放下,再把宽度收缩为50px,但是一旦我加入了"queue:false"这个参数: $('#section3a').slideUp(1000) .slideDown(1000) .animate({width: '50px'}, {duration: 1000, queue: false}); 你会发现在收缩放下的同时,object的宽度也在收缩,本来线性执行的slideUp,slideDown,animate,变成了animate和slideUp,slideDown并行: OK,我们回过头来再看实战中的这个例子: $("#object") .delay(1000, "fader") .queue("fader", function(next) { $(this).animate({opacity: 0}, {duration: 1000, queue: false}); next(); }) .dequeue("fader") .animate({top: "-=40"}, {duration: 2000}) 其实前三个语句(这里所说的语句以"."为区分标志),做了这么几件事: 定义一个名为fader的队列,专用于控制不透明度的改变——.queue()语句 让它1000毫秒后执行——.delay()延时函数,延时fader队列的执行时间;.dequeue执行fader队列。 而最后的.animate则是默认进行的,不用管它。一起来看看效果,左边的是正确的,右边的是错误的(可能在IE6中有布局错位的情况,因为是jQuery例子,时间有限,也就不追究css的错误了吧……) 获取队列长度 比如用队列名取得匹配元素的长度: var $queue=$("div").queue('fx'); 很明显,就是取得队列名为'fx'的队列,如果想取得长度的话: var $length=$('div').queue('fx').length; 注意这里的队列长度只是匹配元素还未运行的队列长度,当动画运行完之后,队列长度会自动归为0,举下面一个例子: function animateT(){ $("#section2-div").slideToggle('3000') .slideToggle('3000') .hide('3000') .show('3000') .animate({left:'+=200'},2000) .hide('3000') .show('3000') .animate({left:'-=200'},2000,animateT);//在这轮动画结束的时候再调用自己,使动画无限循环下去 } 然后当点击按钮的时候显示队列的长度: $("#section2-input").click(function(){ var $queue=$("#section2-div").queue('fx'); $('#section2-h1').text($queue.length); }); (队列长度是4) 本文参考:http://www.cnblogs.com/zhwl/p/4328279.html**
jQuery动画序列相关推荐
- jquery动画切换引擎插件 Velocity.js 学习01
一.Velocity.js介绍 Velocity是一个jQuery插件,重新实现了$.animate() 来产生更高的性能(速度也比CSS动画库更快),而包括新的功能,以提高动画工作流程. Veloc ...
- css3的动画特效--动画序列(animation)
首先复习一下animation动画添加各种参数 (1)infinite参数,表示动画将无限循环.在速度曲线和播放次数之间还可以插入一个时间参数,用以设置动画延迟的时间.如希望使图标在1秒钟后再开始旋转 ...
- js进阶 13-6 jquery动画效果相关常用函数有哪些
js进阶 13-6 jquery动画效果相关常用函数有哪些 一.总结 一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...
- Java程序员从笨鸟到菜鸟之(九十一)跟我学jquery(七)jquery动画大体验
本文来自:曹胜欢博客专栏.转载请注明出处:http://blog.csdn.net/csh624366188 最近一直感觉自己好忙,每天都浑浑噩噩的过着,转眼间,好像有好长时间没有更新笨鸟到菜鸟了.现 ...
- 从零开始学习jQuery (七) jQuery动画-让页面动起来!
本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery ( ...
- JQuery-学习笔记05【高级——JQuery动画和遍历】
Java后端 学习路线 笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
- jQuery 动画效果
1.基本效果 (1)隐藏 hide() hide(speed [,callback]) (2)显示 show() show(speed [,callback]) (3)交替显示隐藏 toggle() ...
- jquery笔记一:下载安装、语法、选择器、遍历选择元素的方法、jQuery动画
目前 jQuery 兼容于所有主流浏览器, 包括 IE 6!开发时常用 jquery.js,上线用 jquery.min.js. jq插件 目前jQuery有三个大版本: (1)1.x.x: 兼容ie ...
- 十四、CSS 3新特性详解(二)——2D转换(transform)、动画(animation)、动画序列
HTML5 第二天 一.rotate 2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转 使用步骤: 给元素添加转换属性 transform 属性值为 rotate(角度) 如 transfor ...
最新文章
- SQL PL/SQL SQL*PLUS三者的区别
- 折纸机器人的步骤图解_折纸图解走路的人
- Silverlight的跨站策略和跨站策略文件
- 如何限制用户的内存使用量
- 大型网站技术架构02 网站的高性能架构、网站的可用性架构
- 堆栈关系java_从关键字说Java对象、引用、指针、堆栈的关系
- 可怜的 JavaScript,他们说你很怪异,你知道吗?
- 调查显示存储虚拟化技术尚需3到5年才能成熟
- 人工智能时代的危机_AI信任危机:如何前进
- PHP代码审计基础知识
- ENSP模拟AC/AP配置
- 《区块链+》读书感想
- 别让自大成为职场绊脚石
- 微软Azure 虚拟机支持多种 Linux 发行版!
- 计算机网络通过IP地址计算子网掩码
- 教授专栏08| 徐岩:青年震荡与青年危机
- 安装CAJViewer时遇到注册模块出现1904错误解决方法
- 【JS】网页悬浮广告及联系QQ客服侧边栏
- springboot请求put请求
- 十分钟安装一套即时通讯 IM 私有云