jQuery的动画处理总结 BY:色拉油啊油
最近一年多一直在做前端的东西,由于老板在追求一些年轻动感的效果,让页面元素不能仅仅是简单的隐藏显示,所以经常会使用一些动画效果,发现jQuery的动画真心好用啊,把常用的几个总结一下,希望不再每次使用的时候还去翻API
queue()/ dequeue()
这两个方法就像Ajax的XMLHttpRequest对象一样的隐蔽,不为常人所知。这两个方法在动画处理的时候很有用,我们经常会写一些这样的代码
$('#test').animate({"width": "300px","height": "300px","opacity":"1"});
这样test div的height、width、opacity是同时变化的,有时候我们不希望同步执行,而是形状的变化和透明度的变化分开,先变成300*300的div,然后透明度再逐渐变化,我们需要这么写
$('#test').animate({"width": "300px","height": "300px",}, function () {$('#test').animate({ "opacity": "1" }); });
同学们可以想象一下要是有十个动画流程,那代码是什么样的,queue()和dequeue()可以解决此类问题,为所有的流程方法见一个队列,让function依次调用,先看一下语法
queue( [queueName ], newQueue ) 操作欲执行队列方法
第一个参数是队列名称,不写的话默认是fx
第二个参数可以是一个函数数组,存放所有队列函数,也可以是一个回掉函数,用于向队列中添加新函数
dequeue( [queueName ] ) 为匹配元素执行队列中的下一个function
每次调用此方法执行队列中下一函数
![](/assets/blank.gif)
var q = [function () {$(this).animate({ "width": "200px", "height":"200px" }, next) }, function () { $(this).animate({ "width": "400px", "height": "400px" }, next); } ]; function next(){ $('#test').dequeue('myQueue'); } $('#test').queue('myQueue', q); next();
![](/assets/blank.gif)
上面代码就是可以让test div先变成200*200的,然后再变为400*400的,每个动画都执行回掉函数,调用队列中下一个方法,两个动画依次执行,如果在执行期想再添加某个函数可以这样
![](/assets/blank.gif)
var q = [function () {$(this).animate({ "width": "200px", "height":"200px" }, next) }, function () { $(this).animate({ "width": "400px", "height": "400px" }, next); } ]; function next(){ $('#test').dequeue('myQueue'); } $('#test').queue('myQueue', q); next(); $('#test').queue('myQueue',function () { $(this).slideUp().dequeue('myQueue'); });
![](/assets/blank.gif)
总而言之这两个方法就是为了方便动画按照预定次序执行
clearQueue() /stop()
这两个方法主要是为了取消动画
clearQueue( [queueName ] ) 将队列中函数清空
stop( [queue ] [, clearQueue ] [, jumpToEnd ] ) 用于停止正在进行的动画
queue:正在进行的动画队列名称
clearQueue:默认值为false,是否将队列本身也清空
jumpToEnd:默认值为false,是否立即执行完动画
如果想停止刚才动画可以这么写
$('#test').clearQueue('myQueue');
这样写不会不会终止动画,只是当前动画执行完后,不会再调用队列中下一个动画(队列被清空了嘛,没有下一个了),如果想立即停止动画,可以这么写
$('#test').stop();
至于停止动画是暂停还是立即执行完,就学要配置stop()的参数了
slideDown()/ slideUp()/ slideToggle()
slide效果在做动画的时候经常会使用,尤其是菜单,这三个函数很简单,就是元素收起/伸展/自动判断收起伸展,但是其参数不仅仅是duration,我们还能加一些其他的控制,看看API中的介绍,这Sanger函数参数类似,那slideUp举例
slideUp( [duration ] [, easing ] [, complete ] ) easing是渐变方式,这个我从来没有手工改动过,duration不写的话,默认会用大概一秒的时间完成动画
slideUp(options)
options中常用的配置有
duration:动画时间
queue:这个看了上面自然会懂
step:动画过程中每次属性改动时执行
complete:动画完成时执行
start:动画开始时执行
always:动画被终止或者意外发生没有执行完时发生
这三个函数在执行的时候会修改元素height,在sideUp()执行完后会把height复原,并把diaplay设为none
fadeIn()/ fadeOut()/ fadeToggle()/ fadeTo()
fadeIn()/ fadeOut()/ fadeToggle() 的用法和slide系列类似,不再一一说明,只不过这三个函数修改的时元素的透明度,fadeOut()函数在执行完后会将元素opacity复原,并把display属性设为none
fadeTo( duration, opacity [, easing ] [, complete ] ) fadeTo()方法就没有那么复杂了,但是fadeTO()的duration和opacity不是可省略的,必须写
show()/ hide()/ toggle()
这三个函数的用法和slide系列一样,但是在效果上有几点儿不同
1.如果参数duration不写,那么回立即执行没有动画
2.这个动画同时修改height、width、opacity属性
3.hide()执行完成后会将height、width、opacity属性还原,并把display设为none
animate()
有些复杂的动画靠上面几个函数不能够实现,这时候就是强大的animate派上用场的时候了,animate()有两种用法
.animate( properties [, duration ] [, easing ] [, complete ] )
大部分属性都不用解释,properties是个json,属性的值可以是字面量、function、”toggle”、简单表达式,如果是 function会把返回值赋给属性,熟悉jQuery的同学肯定明白“toggle”是什么,就是让一个属性在初始值和最小值之间切换,能够使用 toggle的属性有width、height、opacity等包含数字值属性,简单表达式是+=、-=等,比如可以这么些 “width”:”+=10px”。
![](/assets/blank.gif)
$( "#block" ).animate({width: "70%",opacity: 0.4,marginLeft: "0.6in",fontSize: "3em",borderWidth: "+=10px" }, 1500 );
![](/assets/blank.gif)
如果传入了回掉函数,该函数会在动画执行完后调用
.animate( properties, options )
这种用法更为灵活,properties和前一个用法一样,常用options有
duration:动画时间
queue:function队列
step:每次属性调整的回掉函数
complete:完成动画的回掉函数
start:动画开始的时候调用
always:动画被终止或者意外发生没有执行完时发生
要不说jQuery好用,上面这几个配置是不是很熟悉呢
![](/assets/blank.gif)
$( "#book" ).animate({width: "toggle",height: "toggle"}, {duration: 5000,specialEasing: {width: "linear",height: "easeOutBounce" }, complete: function() { $( this ).after( "<div>Animation complete.</div>" ); } });
![](/assets/blank.gif)
hover()
严格说这个并不是个动画函数,但是由于低版本IE的hover对很多元素都不起作用,用CSS无法完成很多动作,所以经常需要使用JavaScript进行haver事件的处理。
.hover( handlerIn(eventObject), handlerOut(eventObject) )
方法很简单,不多介绍了,这样就能把mousein 和mouseout写在一起了。
转载于:https://www.cnblogs.com/gongzhujiademao/articles/4221799.html
jQuery的动画处理总结 BY:色拉油啊油相关推荐
- js进阶 13-5 jquery队列动画如何实现
js进阶 13-5 jquery队列动画如何实现 一.总结 一句话总结:同一个jquery对象,直接写多个animate()就好. 1.什么是队列动画? 比如说先左再下,而不是左下一起走 2.怎么实现 ...
- Lazy Line Painter – 很有趣的 jQuery 路径动画插件
Lazy Line Painter 是基于 Raphaël(一个用于在网页中绘制矢量图形的 Javascript 库)的 jQuery 路径动画插件,能够把线条图案转换为吸引眼球的路径动画模式. 您可 ...
- 放弃使用jQuery实现动画
在 Web开发的圈子里,开发者常常认为CSS动画是一种高性能web动画技术,如果想让网页加载的更快一些,就应该用纯CSS动画.其实这种观点是错误的, 很多开发者早就放弃了javascript的动画,迫 ...
- HTML5动态圆形导航,jQuery带动画特效的圆形导航菜单特效
这是一款jQuery带动画特效的圆形导航菜单特效.该导航菜单在被点击时,会以动画的方式移动到屏幕中间,并展开为一个圆形菜单,效果非常炫酷. 使用方法 在页面中引入jquery和TweenMax.js的 ...
- jQuery Easing 动画效果扩展--使用Easing插件,让你的动画更具美感。
jQuery Easing 是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动.幻灯片切换等场景应用比较多.它非常小巧,且有多种动画方案供选择,使用简单,而且免费. 引入Eas ...
- html数字变换插件,轻量级jquery数字动画插件
jquery.countup.js是一款轻量级jquery数字动画插件.该数字动画插件可以在页面滚动时,将指定的数字从0开始计数增加动画. 该数字动画插件可以控制动画的延迟时间和动画过渡时间.它依赖于 ...
- 第一百七十二节,jQuery,动画效果
jQuery,动画效果 学习要点: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性 一.显示.隐藏 jQuery 中显示方法为:. ...
- 【完成发布】Lazy Line Painter – 非常有趣的 jQuery 路径动画插件
Lazy Line Painter 是基于 Raphaël(一个用于在网页中绘制矢量图形的 Javascript 库)的 jQuery 路径动画插件,能够把线条图案转换为吸引眼球的路径动画模式. 您可 ...
- jQuery系列 第五章 jQuery框架动画特效
第五章 jQuery框架动画特效 5.1 jQuery动画特效说明 jQuery框架中为我们封装了众多的动画和特效方法,只需要调用对应的动画方法传递合适的参数,就能够方便的实现一些炫酷的效果,而且jQ ...
最新文章
- 用QQ提问的技巧,用了之后可以提高效率,呵呵。
- 牛津大学计算机系主任:上海是智慧城市的最佳“试验田”|WAIC专访
- Maven项目下update maven后Eclipse报错:java.lang.ClassNotFoundException: org.springfra
- 一文聊透 Dubbo 优雅停机
- 百练OJ:2800:垂直直方图
- java算术运算符的分类_6.Java算术运算符
- 低代码开发平台_如何挑选最适合你的低代码开发平台
- c语言temp=p1,求助单片机C语言大神!!!uchar temp; temp=0; P1=temp;temp++;这怎么理解?...
- ERP系统如何完成工厂车间流程
- mac OS系统中 设置ssh连接端口
- Linux下C程序的编辑,编译和运行以及调试
- Jenkins与DevOps持续交付详解
- 江苏计算机二级报名一年几次,江苏计算机二级每年考几次
- 【计算机网络】第三部分 数据链路层(15) 连接局域网、主干网和虚拟局域网
- 贝尔机:带你领略编码的魅力
- vba传值调用_VBA传递参数步骤
- linux 无法使用pstree命令
- oracle natural join qualifier,自然连接(natural join)
- maven+spring mvc+mybatis+redis+dubbo+zookeeper
- Windows系统下如何截屏
热门文章
- 【无标题】Map的使用方式
- java基础之包_繁星漫天_新浪博客
- 长链剖分优化树形dp
- .Net Core 编码规范
- java 与 汇编_清华大学出版社-图书详情-《汇编语言与计算机体系结构——使用C++和Java》...
- 英雄联盟手游显示服务器尚未开启什么意思,英雄联盟手游could not connect to the server是什么意思-could not解决办法[图文]-游戏窝...
- 【前端修炼场】 — 这些标签你学会了么?快速拿下 “hr”
- Androidstudio通过无线连接进行调试
- TM1638芯片 LED数码管驱动器 详细介绍
- 网络电视经常出现服务器无响应,为什么pps总是显示服务器未能响应停止播放