jQuery动画(显示隐藏,淡入淡出,滑动)
目录
分类
基本动画函数
显示元素
交替显示隐藏
滑动效果
向上收缩效果
向下展开效果
交替伸缩样式
淡入淡出效果
淡入效果
淡出效果
自定义不透明度
jQuery的动画函数
分类
基本动画函数:既有透明度渐变,又有滑动效果。是最常用的动画效果函数
滑动动画函数:仅使用滑动渐变效果
淡入淡出动画函数:仅使用透明度渐变效果
基本动画函数
显示元素
jQuery中用来显示已经被隐藏的元素的方法是使用 show(speed,[callback]) 函数,他的动画效果是向左上角缩小,并且元素本身逐渐变淡直至消失。
隐藏已经显示的元素的方法是使用 hide(speed,[callback]) 函数(参数与显示函数的参数含义相同)
函数名 | show(speed,[callback]) |
作用 | 以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数。可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度 |
返回值 | jQuery |
参数 |
speed(String,Number):三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如1000)。 callback (Function): 在动画完成时执行的函数,每个元素执行一次 |
交替显示隐藏
所谓交替显示隐藏,就是当用户单击时,如果操作的页面元素是显示状态,则将其隐藏,如果其是隐藏的,则将其显示出来。
jQuery中用于实现交替显示隐藏的函数是 toggle(speed,[callback])
函数名 | toggle(speed,[callback]) |
作用 | 以优雅的动画切换元素的可见状态。如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的 |
返回值 | jQuery |
参数 |
speed(String,Number):三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如1000)。 callback (Function): 在动画完成时执行的函数,每个元素执行一次 |
滑动效果
向上收缩效果
向上收缩效果就是对页面元素通过高度变化(向上减小)来动态地隐藏。在jQuery中实现该效果的函数是 slideUp(speed,[callback]) 。
函数名 | slideUp(speed,[callback]) |
作用 | 通过高度变化来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。 |
返回值 | jQuery |
参数 |
speed(String,Number):三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如1000)。 callback (Function): 在动画完成时执行的函数,每个元素执行一次 |
向下展开效果
向上收缩用于元素的隐藏,向下展开则用于隐藏元素的显示。jQuery中用于实现向下滑动展开元素内容的函数为 slideDown(speed,[callback]) 。
函数名 | slideDown(speed,[callback]) |
作用 | 通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数 |
返回值 | jQuery |
参数 |
speed(String,Number):三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如1000)。 callback (Function): 在动画完成时执行的函数,每个元素执行一次 |
交替伸缩样式
交替伸缩样式和交替显示隐藏类似,都是当用户单击时,如果操作的页面元素是显示状态,则将其隐藏,如果其是隐藏的,则将其显示出来。只不过这里显示的动画效果是向上或者向下滑动。jQuery中处理交替伸缩样式的函数是 slideToggle(speed,[callback]) 。
函数名 | slideToggle(speed,[callback]) |
作用 | 通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数 |
返回值 | jQuery |
参数 |
speed(String,Number):种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如1000)。 callback (Function):在动画完成时执行的函数,每个元素执行一次 |
淡入淡出效果
淡入淡出效果我们在电影以及PowerPoint演示中经常见到,它是实现画面融入背景渐渐消失或者从纯色背景逐渐显示的效果。从实现上来讲就是控制画面本身的不透明度来实现其显示和隐藏效果。
淡入效果
淡入效果是指页面上元素的透明度不断减小,直到清晰显示出来的效果。在jQuery中实现淡入效果使用 fadeIn(speed,[callback]) 函数。
函数名 | fadeIn(speed,[callback]) |
作用 | 通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数 |
返回值 | jQuery |
参数 |
speed(String,Number):三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如1000)。 callback (Function):在动画完成时执行的函数,每个元素执行一次 |
淡出效果
淡出效果是指页面上元素的透明度不断增大,直到消失不见的效果。jQuery中处理淡出效果的是 fadeOut(speed,[callback]) 函数。
函数名 | fadeOut(speed,[callback]) |
作用 | 通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数 |
返回值 | jQuery |
参数 |
speed(String,Number):三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如1000)。 callback (Function):在动画完成时执行的函数,每个元素执行一次 |
自定义不透明度
fadeOut(speed,[callback])函数和fadeIn(speed,[callback])函数实现的最终结果要么是完全显示元素,要么是完全隐藏元素,不能够停留在中间的某个状态上。jQuery中专门有一个函数来设定最终结果为中间某个状态,换句话说就是设定最终的元素为半透明状态。它就是 fadeTo(speed,opacity,[callback]) 函数。
函数名 | fadeTo(speed,opacity,[callback]) |
作用 | 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数 |
返回值 | jQuery |
参数 |
speed(String,Number):三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如1000)。 opacity (Number):要调整到的不透明度值(0到1之间的数字)。 callback (Function):(可选)在动画完成时执行的函数。 |
jQuery动画(显示隐藏,淡入淡出,滑动)相关推荐
- jQuery 效果——显示隐藏/滑动/淡入淡出/自定义动画||事件切换——简洁版滑动下拉菜单
jQuery 效果 显示隐藏效果 <!DOCTYPE html> <html lang="en"><head><meta charset= ...
- php中加载图片淡入淡出,jQuery实现滚动图片淡入淡出功能
这次给大家带来jQuery实现滚动图片淡入淡出功能,jQuery实现滚动图片淡入淡出的注意事项有哪些,下面就是实战案例,一起来看一下. 下面是上下滚动源码 向上滚动代码带上下翻按钮滚动特效 body{ ...
- Android App开发动画特效中帧动画和电影淡入淡出动画的讲解及实战(附源码和演示视频 简单易懂)
需要图片集和源码请点赞关注收藏后评论区留言~~~ 一.帧动画 Android的动画分为三类,帧动画,补间动画和属性动画.其中帧动画是实现原理最简单的一种,跟现实生活中的电影胶卷类似,都是在短时间内连续 ...
- jquery animate 显示隐藏
jquery 中 animate(动画) 显示隐藏 需要使用 opacity(透明度:0跟1), 使用display和visibility 是无效的.
- JQuery 渐变显示隐藏动画 ( fadeIn(),fadeOut(),fadeTo() )
$('#div1').fadeIn(1000); //渐变显示.1000毫秒,表示动画显示过程时间. $('#div1').fadeOut(1000); //渐变隐藏 $('#div1').fad ...
- jquery效果 显示隐藏 滑入滑出
jquery jquery效果 jquery 给我们封装了很多动画效果,最为常见的如下: 显示隐藏:show() / hide() / toggle() ; 滑入滑出:slideDown() / sl ...
- JQuery:多张图片的淡入淡出效果。
我们要实现一个这样子的一个动画:多张图片在相同的位置淡入淡出,实现图片的轮流展示.具体实现的思路: 使用定时器setInterval方法,setInterval(<要调用的方法>,时间延时 ...
- animation css逐渐消除,css3动画控制元素淡入淡出显示效果
/*定义公共淡入淡出效果 fadenum*/ @-webkit-keyframes fadenum{ /*设置内容由显示变为隐藏*/ 0%{opacity: 0;} 100%{opacity: 1;} ...
- Mr.J-- jQuery学习笔记(十四)--动画显示隐藏
eq()函数 定义和用法 :eq() 选择器选取带有指定 index 值的元素. index 值从 0 开始,所有第一个元素的 index 值是 0(不是 1). 经常与其他元素/选择器一起使用,来选 ...
- 代码简洁的上方滑动门(选项卡tab)jquery插件可重复使用,淡入淡出效果(用)
代码简洁的滑动门(tab)jquery插件调用方法:"#tabs",".tab_con" 这里的#tabs是jquery选项卡的链接按钮的外层ID,.tab_c ...
最新文章
- 学号 20172326 《程序设计与数据结构》第三周学习总结
- C#实现动态桌面背景图片切换
- 上海交大 CDNet:基于YOLOv5改进的 人行道 斑马线和汽车过线行为检测
- c语言的适当大小的子集,编译原理上机实验报告
- Silverlight Tips(1)
- java中三种常见内存溢出错误的处理方法
- mac mysql 初始密码_mac下mysql安装后修改默认密码
- vbreport8.wpf.viewer 个别电脑不显示_手机听歌不过瘾?一招将Win10电脑变成蓝牙音箱...
- HTML使川锚标签,第1章HTML的基本标签祥解.ppt
- python-socket模块基本用法收集
- 必备技能10:管理学类重要期刊名录 -- UTD24 和 FT50
- 微信打不开MP4文件 (记录编码问题)
- php中文网怎么修改头像,thinkphp 头像上传在线剪切编辑问题 (使用美图秀秀头像编辑器组件)...
- 上传文件到服务器太大怎么办,超大文件怎么上传到云服务器
- 理工附中2021年高考成绩查询,2021年江苏理工学院录取结果查询,附查询网址入口...
- 四轴码垛机器人MDH模型运动学
- 150集Linux网络编程培训视频吐血整理 | 网络基础
- 【庖丁解牛系列】 项目时间管理之前导图/单代号网络图
- 古诗收集(持续不定时更新)
- Android 12小时制和24小时制的切换
热门文章
- [学习日志]使用pytorch 和 bert 实现一个简单的文本分类任务
- centos6英文版中文乱码的全面解决(也可用于其他linux系统)[转]
- 基于jQuery点击圆形边框弹出图片信息
- Razor中Html.DropDownListFor用法
- 摩尔庄园指定服务器不存在,在《摩尔庄园》里,不存在社交恐惧这回事儿
- 百度助力首届国际青少年编程竞赛,05后小学生成为“AI新秀”
- 广电大数据用户画像及营销推荐策略(四)——Python实现
- Qt+BarTender对“.btw“文件的打印操作
- ASP.NET MVC 入门
- 安卓手机USB共享网络步骤