博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
深入学习jQuery的三种常见动画效果
阅读量:6491 次
发布时间:2019-06-24

本文共 7150 字,大约阅读时间需要 23 分钟。

前面的话

  动画效果是jQuery吸引人的地方。通过jQuery的动画方法,能够轻松地为网页添加视觉效果,给用户一种全新的体验。jQuery动画是一个大的系列,本文将详细介绍jQuery的三种常见动画效果——显隐效果、高度变化及淡入淡出

 

显隐

  在CSS中,总结过实现。而jQuery中的show()和hide()方法是通过改变display属性来实现元素显隐效果,它们是jQuery中最基本的动画方法

【hide()】

  hide()方法是隐藏元素的最简单方法。如果没有参数,匹配的元素将被立即隐藏,没有动画。这大致相当于调用.css('display', 'none')

  display属性值保存在jQuery的数据缓存中,所以display可以方便以后可以恢复到其初始值。如果一个元素的display属性值为inline,那么隐藏再显示时,这个元素将再次显示inline

hide([duration])

  当提供一个持续时间参数,hide()就变成了一个动画方法。hide()方法将为匹配元素的宽度、高度及不透明度同时执行动画。一旦透明度达到0,display样式属性将被设置为none,这个元素将不再在页面中影响布局

  持续时间是以毫秒为单位的,数值越大,动画越慢。默认值为'normal',代码400毫秒的延时;'fast'和'slow'分别代表200和600毫秒的延时

  • fast
  • normal
  • slow
  • 100
  • 1000

hide([duration][,easing])

  hide()方法可以接受一个可选参数easing,表示过渡使用哪种缓动函数。jQuery自身提供"linear"和"swing",其他可以使用相关的插件,其中默认值为swing

  linear表示匀速直线运动,而swing则表示变速运动,如下图所示

linear

swing

  • swing
  • linear

hide([duration][,easing][,callback])

  hide()方法可以接受第三个参数,该参数也是可选参数,该参数是回调函数,表示动画完成时执行的函数

【show()】

  show()方法用于显示元素,与hide()方法用途正好相反,但用法相似

  [注意]如果选择的元素是可见的,这个方法将不会改变任何东西

  如果没有参数,匹配的元素将被立即显示,没有动画

show([duration])

  与hide()方法类似,当提供一个持续时间参数,show()就变成了一个动画方法。show()方法将为匹配元素的宽度、高度及不透明度同时执行动画

  持续时间是以毫秒为单位的,数值越大,动画越慢。默认值为'normal',代码400毫秒的延时;'fast'和'slow'分别代表200和600毫秒的延时

  • fast
  • normal
  • slow
  • 100
  • 1000

show([duration][,easing])

  show()方法可以接受一个可选参数easing,表示过渡使用哪种缓动函数。jQuery自身提供"linear"和"swing",默认值为swing

  • fast
  • normal
  • slow
  • 100
  • 1000

show([duration][,easing][,callback])

  show()方法可以接受第三个参数,该参数也是可选参数,该参数是回调函数,表示动画完成时执行的函数

【toggle()】

  show()与hide()是一对互斥的方法。需要对元素进行显示隐藏的互斥切换,通常情况是需要先判断元素的display状态,然后调用其对应的处理方法。比如显示的元素,那么就要调用hide,反之亦然。 对于这样的操作行为,jQuery提供了一个便捷方法toggle()用于切换显示或隐藏匹配元素

  如果没有参数,toggle()方法是最简单的方法来切换一个元素可见性

  通过改变CSS的display属性,匹配的元素将被立即显示或隐藏,没有动画。如果元素是最初显示,它会被隐藏,如果隐藏的,它会显示出来。display属性将被储存并且需要的时候可以恢复。如果一个元素的display值为inline,然后是隐藏和显示,这个元素将再次显示inline

toggle([duration])

  当提供一个持续时间参数,toggle()成为一个动画方法。toggle()方法将为匹配元素的宽度、高度及不透明度,同时进行动画。当一个隐藏动画后,高度值达到0的时候,display样式属性被设置为none,以确保该元素不再影响页面布局

  持续时间是以毫秒为单位的,数值越大,动画越慢。默认值为'normal',代码400毫秒的延时;'fast'和'slow'分别代表200和600毫秒的延时

  • fast
  • normal
  • slow
  • 100
  • 1000

toggle([duration][,easing])

  toggle()方法可以接受一个可选参数easing,表示过渡使用哪种缓动函数。jQuery自身提供"linear"和"swing",默认值为swing

  • swing
  • linear

toggle([duration][,easing][,callback])

  toggle()方法可以接受第三个参数,该参数也是可选参数,表示回调函数,即动画完成时执行的函数

高度变化

  使用show()/hide()实现动画效果时,宽度、高度及透明度会同时变化。若只想让高度发生变化,则需要使用slideUp()方法和slideDown()方法

【slideUp()】

  slideUp()方法将元素由下到上缩短隐藏

  [注意]没有参数时,持续时间默认为400毫秒

slideUp([duration])

  slideUp()方法可以接受一个持续时间参数

  持续时间是以毫秒为单位的,数值越大,动画越慢。默认值为'normal',代码400毫秒的延时;'fast'和'slow'分别代表200和600毫秒的延时

  • fast
  • normal
  • slow
  • 100
  • 1000

slideUp([duration][,easing])

  slideUp()方法可以接受一个可选参数easing,表示过渡使用哪种缓动函数。jQuery自身提供"linear"和"swing",默认值为swing,其他可以使用相关的插件

  • swing
  • linear

slideUp([duration][,easing][,callback])

  slideUp()方法可以接受第三个参数,该参数也是可选参数,该参数是回调函数,表示动画完成时执行的函数

【slideDown()】

  与slideUp()方法相反,slideDown()方法使元素由上到下延伸显示

  [注意]没有参数时,持续时间默认为400毫秒

slideDown([duration])

  slideDown()方法可以接受一个持续时间参数

  持续时间是以毫秒为单位的,数值越大,动画越慢。默认值为'normal',代码400毫秒的延时;'fast'和'slow'分别代表200和600毫秒的延时

  • fast
  • normal
  • slow
  • 100
  • 1000

slideDown([duration][,easing])

  slideDown()方法可以接受一个可选参数easing,表示过渡使用哪种缓动函数。jQuery自身提供"linear"和"swing",默认值为swing,其他可以使用相关的插件

  • fast
  • normal
  • slow
  • 100
  • 1000

slideDown([duration][,easing][,callback])

  slideDown()方法可以接受第三个参数,该参数也是可选参数,表示回调函数,即动画完成时执行的函数

【slideToggle()】

  slideDown与slideUp是一对相反的方法。需要对元素进行上下拉卷效果的切换,jQuery提供了一个便捷方法slideToggle()用滑动动画显示或隐藏一个匹配元素

  [注意]没有参数时,持续时间默认为400毫秒

slideToggle([duration])

  当提供一个持续时间参数,slideToggle()成为一个动画方法

  持续时间是以毫秒为单位的,数值越大,动画越慢。默认值为'normal',代码400毫秒的延时;'fast'和'slow'分别代表200和600毫秒的延时

  • fast
  • normal
  • slow
  • 100
  • 1000

slideToggle([duration][,easing])

  slideToggle()方法可以接受一个可选参数easing,表示过渡使用哪种缓动函数。jQuery自身提供"linear"和"swing",默认值为swing 

  • swing
  • linear

slideToggle([duration][,easing][,callback])

slideToggle()方法可以接受第三个参数,该参数也是可选参数,表示回调函数,即动画完成时执行的函数

淡入淡出

  让元素在页面不可见,常用的办法就是通过设置样式的display:none。除此之外还可以一些类似的办法可以达到这个目的设置元素透明度为0,可以让元素不可见,透明度的参数是0~1之间的值,通过改变这个值可以让元素有一个透明度的效果。常见的淡入淡出动画fadeIn()和fadeOut()方法正是这样的原理

【fadeIn()】

  fadeIn()方法通过淡入的方式显示匹配元素

  [注意]没有参数时,持续时间默认为400毫秒

fadeIn([duration])

  fadeIn()方法可以接受一个持续时间参数

  持续时间是以毫秒为单位的,数值越大,动画越慢。默认值为'normal',代码400毫秒的延时;'fast'和'slow'分别代表200和600毫秒的延时

  • fast
  • normal
  • slow
  • 100
  • 1000

fadeIn([duration][,easing])

  fadeIn()方法可以接受一个可选参数easing,表示过渡使用哪种缓动函数。jQuery自身提供"linear"和"swing",默认值为swing,其他可以使用相关的插件

  • swing
  • linear

fadeIn([duration][,easing][,callback])

  fadeIn()方法可以接受第三个参数,该参数也是可选参数,该参数是回调函数,表示动画完成时执行的函数

【fadeOut()】

  fadeOut()方法与fadeIn()方法正好相反,可以通过淡出的方式隐藏匹配元素

  [注意]没有参数时,持续时间默认为400毫秒

fadeOut([duration])

  fadeOut()方法可以接受一个持续时间参数,持续时间是以毫秒为单位的,数值越大,动画越慢。默认值为'normal',代码400毫秒的延时;'fast'和'slow'分别代表200和600毫秒的延时

  • fast
  • normal
  • slow
  • 100
  • 1000

fadeOut([duration][,easing])

  fadeOut()方法可以接受一个可选参数easing,表示过渡使用哪种缓动函数。jQuery自身提供"linear"和"swing",默认值为swing,其他可以使用相关的插件

  • swing
  • linear

fadeOut([duration][,easing][,callback])

  fadeOut()方法可以接受第三个参数,该参数也是可选参数,该参数是回调函数,表示动画完成时执行的函数

【fadeToggle()】

  fadeToggle()方法通过匹配的元素的不透明度动画,来显示或隐藏它们

  [注意]没有参数时,持续时间默认为400毫秒

fadeToggle([duration])

  当提供一个持续时间参数,fadeToggle()成为一个动画方法

  持续时间是以毫秒为单位的,数值越大,动画越慢。默认值为'normal',代码400毫秒的延时;'fast'和'slow'分别代表200和600毫秒的延时

  • fast
  • normal
  • slow
  • 100
  • 1000

fadeToggle([duration][,easing])

  fadeToggle()方法可以接受一个可选参数easing,表示过渡使用哪种缓动函数。jQuery自身提供"linear"和"swing",默认值为swing

  • swing
  • linear

fadeToggle([duration][,easing][,callback])

  fadeToggle()方法可以接受第三个参数,该参数也是可选参数,表示回调函数,即动画完成时执行的函数

【fadeTo()】

  淡入淡出fadeIn与fadeOut都是修改元素样式的opacity属性,但是他们都有个共同的特点,变化的区间要么是0,要么是1。如果要让元素保持动画效果,执行opacity = 0.5的效果时,要如何处理?jQuery提供了fadeTo()方法,可以让改变透明度一步到位

fadeTo(duration,opacity)

  fadeTo()方法有两个必需的参数duration和opacity

  duration表示持续时间,持续时间是以毫秒为单位的,数值越大,动画越慢。默认值为'normal',代码400毫秒的延时;'fast'和'slow'分别代表200和600毫秒的延时

  opacity为0和1之间的数字表示元素的不透明度

  • fast
  • normal
  • slow
  • 100
  • 1000

  可以为元素设置随机的不透明度

fadeTo(duration,opacity[,easing])

  fadeTo()方法可以接受一个可选参数easing,表示过渡使用哪种缓动函数。jQuery自身提供"linear"和"swing",默认值为swing

  • swing
  • linear

fadeTo(duration,opacity[,callback])

  fadeTo()方法还可以接受一个可选参数,该参数表示回调函数,即动画完成时执行的函数

转载于:https://www.cnblogs.com/xiaohuochai/p/5932616.html

你可能感兴趣的文章
从零玩转jQuery-核心函数和静态方法
查看>>
8月3日科技联播:新型VR头盔可令盲人重获光明 ,联通阿里成立合资企业“云粒智慧”...
查看>>
Jeknins的Pipline方式构建任务
查看>>
Python全栈 项目(电子词典、协程、pdb调试)
查看>>
(周期计划-7)常用集合的源码分析:ArrayList
查看>>
“分叉并商品化”,GitLab 和 Elastic 炮轰 AWS 的开源方法
查看>>
MKVToolNix v33.0.0 发布,MKV 视频编辑工具软件
查看>>
Egg 2.19.0 发布,阿里开源的企业级 Node.js 框架
查看>>
CentOS7.4安装Gitlab10.5.1及汉化
查看>>
Virtualbox以及VWare在Win10下的不兼容
查看>>
Github上如何在Fork到的开源项目中提交Pull requests?
查看>>
Java单向链表反转
查看>>
一些开发遇到的"小问题",你能答对多少?
查看>>
面对前车之鉴的AR,现在的VR要做些什么?
查看>>
自然语言理解势头正强劲,可总还是缺点啥
查看>>
【python图像处理】给图像添加透明度(alpha通道)
查看>>
区块链与微服务天生是一对
查看>>
VDI市场:探寻企业影子IT风险来源|
查看>>
阿里云黄海宇:窄带高清2.0——让直播更惊艳的魔术
查看>>
SID颁发全球显示行业个人奖项
查看>>