jQuery 淡入/淡出效果函数用法分析


Posted in jQuery onMay 19, 2020

本文实例讲述了jQuery 淡入/淡出效果函数用法。分享给大家供大家参考,具体如下:

jQuery Fading 方法

jQuery 拥有下面四种 fade 方法:

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()

jQuery fadeIn() 方法

jQuery fadeIn() 用于淡入已隐藏的元素。

语法:

$(selector).fadeIn(speed,callback);
  • 可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。.
  • 可选的 callback 参数是 fading 完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeIn() 方法

$("button").click(function(){
 $("#div1").fadeIn();
 $("#div2").fadeIn("slow");
 $("#div3").fadeIn(3000);
});

jQuery fadeOut() 方法

jQuery fadeOut() 方法用于淡出可见元素。

语法:

$(selector).fadeOut(speed,callback);
  • 可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
  • 可选的 callback 参数是 fading 完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeOut() 方法:

$("button").click(function(){
 $("#div1").fadeOut();
 $("#div2").fadeOut("slow");
 $("#div3").fadeOut(3000);
});

jQuery fadeToggle() 方法

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

  • 如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。
  • 如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。

语法:

$(selector).fadeToggle(speed,callback);
  • 可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
  • 可选的 callback 参数是 fading 完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeToggle() 方法:

$("button").click(function(){
 $("#div1").fadeToggle();
 $("#div2").fadeToggle("slow");
 $("#div3").fadeToggle(3000);
});

jQuery fadeTo() 方法

jQuery fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。

语法:

$(selector).fadeTo(speed,opacity,callback);
  • 必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
  • fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。
  • 可选的 callback 参数是该函数完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeTo() 方法:

$("button").click(function(){
 $("#div1").fadeTo("slow",0.15);
 $("#div2").fadeTo("slow",0.4);
 $("#div3").fadeTo("slow",0.7);
});

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于jQuery相关内容还可查看本站专题:《jQuery动画与特效用法总结》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery实现简单的抽奖游戏
May 05 jQuery
jquery版轮播图效果和extend扩展
Jul 18 jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
Jquery Datatables的使用详解
Jan 30 jQuery
jQuery HTML css()方法与css类实例详解
May 20 jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
jQuery实现简单三级联动效果
Sep 05 jQuery
jQuery实现简单全选框
Sep 13 jQuery
jQuery 动画与停止动画效果实例详解
May 19 #jQuery
jQuery 选择方法及$(this)用法实例分析
May 19 #jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 #jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 #jQuery
jQuery AJAX应用实例总结
May 19 #jQuery
jquery+css3实现的经典弹出层效果示例
May 16 #jQuery
JQuery事件冒泡和默认行为代码实例
May 13 #jQuery
You might like
php中通过smtp发邮件的类,测试通过
2007/01/22 PHP
js技巧--转义符"\"的妙用
2007/01/09 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
2015/07/27 Javascript
jQuery中hover与mouseover和mouseout的区别分析
2015/12/24 Javascript
JavaScript中循环遍历Array与Map的方法小结
2016/03/12 Javascript
vue.js事件处理器是什么
2017/03/20 Javascript
seajs中模块依赖的加载处理实例分析
2017/10/10 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
2018/06/07 Javascript
详解在网页上通过JS实现文本的语音朗读
2019/03/28 Javascript
vue实现图片上传功能
2020/05/28 Javascript
微信小程序多列表渲染数据开关互不影响的实现
2020/06/05 Javascript
从零学python系列之浅谈pickle模块封装和拆封数据对象的方法
2014/05/23 Python
整理Python中的赋值运算符
2015/05/13 Python
Python实现多并发访问网站功能示例
2017/06/19 Python
Django如何配置mysql数据库
2018/05/04 Python
Pycharm2017版本设置启动时默认自动打开项目的方法
2018/10/29 Python
24式加速你的Python(小结)
2019/06/13 Python
Python实现搜索算法的实例代码
2020/01/02 Python
基于python3生成标签云代码解析
2020/02/18 Python
在python中利用dict转json按输入顺序输出内容方式
2020/02/27 Python
django-xadmin根据当前登录用户动态设置表单字段默认值方式
2020/03/13 Python
python 画图 图例自由定义方式
2020/04/17 Python
床上用品全球在线购物:BeddingInn
2016/12/18 全球购物
说一下Linux下有关用户和组管理的命令
2016/01/04 面试题
网吧收银员岗位职责
2013/12/14 职场文书
加工操作管理制度
2014/01/19 职场文书
大学生学习2014全国两会心得体会
2014/03/13 职场文书
小学生学习雷锋倡议书
2014/05/15 职场文书
计算机系统管理员求职信
2014/06/20 职场文书
森林防火宣传标语
2014/06/27 职场文书
设备收款委托书范本
2014/10/02 职场文书
员工工作表现自我评价
2015/03/06 职场文书
社会主义核心价值观主题教育活动总结
2015/05/07 职场文书
用Python制作灯光秀短视频的思路详解
2021/04/13 Python
django注册用邮箱发送验证码的实现
2021/04/18 Python
MySQL 主从复制数据不一致的解决方法
2022/03/18 MySQL