jQuery fadeIn()和fadeOut()方法
2023-06-13 09:12:02 时间
本节教程先来介绍 fadeIn() 和 fadeOut() 方法,fadeToggle() 和 fadeTo() 之后介绍。
在 jQuery 中,我们可以使用 fadeIn() 方法来实现元素的淡入效果,可以使用 fadeOut() 方法来实现元素的淡出效果。一般情况下,fadeIn() 和 fadeOut() 这两个方法都是配合起来使用的。
语法:
$().fadeIn(speed, fn)
$().fadeOut(speed, fn)
speed 是一个可选参数,表示动画的速度,单位为毫秒。如果省略参数,则表示采用默认速度。speed 有两种取值,一种是 字符串 ,另一种是 数值 ,如表 1 所示。
input id= btn_hide type= button value= 淡出 / input id= btn_show type= button value= 淡入 / br/ img src= img/jquery.png alt= / /body /html
预览效果如图 1 所示。
图 1:fadeIn() 和 fadeOut() 方法的效果
可能有些小伙伴会发现,使用 fadeIn() 和 fadeOut() 方法实现的淡入和淡出效果与使用 show() 和 hide() 方法实现的带动画的显示与隐藏效果几乎是一模一样的。确实,这两种方式很相似。但是我们不要被其表象给蒙蔽了双眼,实际上这两种方式还是有一定区别的。
区别如下:
show() 与 hide():通过改变 height、width、opacity、display 来实现元素的显示与隐藏效果; fadeIn() 与 fadeOut():通过改变 opacity、display 来实现元素的淡入与淡出效果。 此外,使用这两种方式实现的效果在视觉上也有一定的区别,例如,使用 hide() 方法实现的效果是慢慢缩小来隐藏元素,而 fadeOut() 方法实现的效果是整体淡化直至消失。
23861.html
html相关文章
- vue封装jquery修改自身以及兄弟元素的方法「建议收藏」
- Jquery实现超酷的日程安排插件详解编程语言
- Angular和jQuery的区别
- jQuery scroll滚动事件
- jQuery对象[0]是什么含义?
- Jquery中Ajax缓存带来的影响的解决方法
- jQuery布局插件UILayout简介及使用方法
- jquery实现excel导出的方法
- jQuery实现可拖动的浮动层完整代码
- jquery拖动插件(jquery.drag)使用介绍
- html5的自定义data-*属性和jquery的data()方法的使用示例
- 从jquery的过滤器.filter()方法想到的
- jquery中animate动画积累的解决方法
- 多个jquery.datatable共存,checkbox全选异常的快速解决方法
- jquery中$.post()方法的简单实例
- jquery检测inputchecked控件是否被选中的方法
- jquery跟js初始化加载的多种方法及区别介绍
- jQuery如何取id有.的值一般的方法是取不到的
- 用jquery.sortElements实现table排序
- Jquery图片延迟加载插件jquery.lazyload.js的使用方法
- jquery引用方法时传递参数原理分析
- Jquery节点遍历next与nextAll方法使用示例
- jQuery自定义添加"$"与解决"$"冲突的方法
- jquery调取json数据实现省市级联的方法
- Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法