前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jQuery中的简单动画

jQuery中的简单动画

作者头像
IMWeb前端团队
发布2018-01-08 16:28:23
1.6K0
发布2018-01-08 16:28:23
举报
文章被收录于专栏:IMWeb前端团队IMWeb前端团队

本文作者:IMWeb 一大碗油茶 原文出处:IMWeb社区 未经同意,禁止转载

hide(time)将元素的display变为none,可以设置时间,让其缓慢的变化

show(time)将元素的display变为block,可以设置时间,让其缓慢的变化

fadeln(),fadeOut()

只改变元素透明度,out会在指定的一段时间内降低元素的不透明度,直到完全消失,in则相反

slideDown(),slideUp()

只改变元素的高度,如果一个元素的display为none,调用down时元素将由上至下延伸显示,up则相反

toggle():切换元素的可见状态,如果是可见,则切换为隐藏,如果原始是隐藏,则切换为可见

slideToggle():通过高度变化来切换匹配元素的可见性

fadeToggle通过透明度来切换元素的可见性,淡入淡出的效果

fadeTo(speed,opacity,fn):切换元素的透明度 。

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)

opacity:一个0至1之间表示透明度的数字。

fn:在动画完成时执行的函数,每个元素执行一次。

代码语言:javascript
复制
$('.content').fadeTo("slow",0.5,function(){});

自定义动画:

代码语言:javascript
复制
animate(params,[speed],[easing],[fn])//创建自定义动画 
params:一组包含作为动画属性和终值的样式属性和及其值的集合
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)
easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
fn:在动画完成时执行的函数,每个元素执行一次。

停止动画:

代码语言:javascript
复制
stop([clearQueue],[jumpToEnd])//停止所有在指定元素上正在运行的动画。
clearQueue:如果设置成true,则清空队列。可以立即结束动画。
gotoEnd:让当前正在执行的动画立即完成,并且重设show和hide的原始样式,调用回调函数等。

延迟动画:

代码语言:javascript
复制
delay(duration,[queueName)
queueName:队列名词,默认是Fx,动画队列。
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档