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中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
jquery实现企业定位式导航效果
Jan 01 jQuery
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
学习jQuery中的noConflict()用法
Sep 28 jQuery
JQuery样式与属性设置方法分析
Dec 07 jQuery
js和jquery判断数据类型的4种方法总结
Aug 28 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正则走开
2008/03/15 PHP
thinkphp模板的包含与渲染实例分析
2014/11/26 PHP
PHP编程入门的基本语法知识点总结
2016/01/26 PHP
PHP聊天室简单实现方法详解
2018/12/08 PHP
PHP命名空间定义与用法实例分析
2019/08/14 PHP
基于PHP的登录和注册的功能的实现
2020/08/06 PHP
jMessageBox 基于jQuery的窗口插件
2009/12/09 Javascript
基于Jquery的动态创建DOM元素的代码
2010/12/28 Javascript
javascript中获取下个月一号,是星期几
2012/06/01 Javascript
编写简单的jQuery提示插件
2014/12/21 Javascript
JavaScript常用脚本汇总(三)
2015/03/04 Javascript
JavaScript汉诺塔问题解决方法
2015/04/21 Javascript
javascript顺序加载图片的方法
2015/07/18 Javascript
Javascript编程之继承实例汇总
2015/11/28 Javascript
js利用正则表达式检验输入内容是否为网址
2016/07/05 Javascript
详解js跨域请求的两种方式,支持post请求
2018/05/05 Javascript
JavaScript中为事件指定处理程序的五种方式分析
2018/07/27 Javascript
JS调用安卓手机摄像头扫描二维码
2018/10/16 Javascript
前端Vue项目详解--初始化及导航栏
2019/06/24 Javascript
layui中的switch开关实现方法
2019/09/03 Javascript
原生JS实现多条件筛选
2020/08/19 Javascript
Vue时间轴 vue-light-timeline的用法说明
2020/10/29 Javascript
浅谈Python中chr、unichr、ord字符函数之间的对比
2016/06/16 Python
基于python的itchat库实现微信聊天机器人(推荐)
2019/10/29 Python
python语言线程标准库threading.local解读总结
2019/11/10 Python
python支持多线程的爬虫实例
2019/12/21 Python
Python调用ffmpeg开源视频处理库,批量处理视频
2020/11/16 Python
英国工具中心:UK Tool Centre
2017/07/10 全球购物
有影响力的人、名人和艺术家的官方商品:Represent
2019/11/26 全球购物
remote接口和home接口主要作用
2013/05/15 面试题
质量保证书范本
2014/04/29 职场文书
励志演讲稿600字
2014/08/21 职场文书
公司捐书倡议书
2015/04/27 职场文书
故意杀人罪辩护词
2015/05/21 职场文书
公司晚会主持词
2019/04/17 职场文书
MySQL的InnoDB存储引擎的数据页结构详解
2022/03/03 MySQL