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实现图片上传前本地预览
Apr 28 jQuery
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 jQuery
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
jquery无缝图片轮播组件封装
Nov 25 jQuery
jquery实现直播视频弹幕效果
Feb 25 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
关于svn冲突的解决方法
2013/06/21 PHP
Yii框架调试心得--在页面输出执行sql语句
2014/12/25 PHP
php微信浏览器分享设置以及回调详解
2016/08/01 PHP
PHPStorm 2020.1 调试 Nodejs的多种方法详解
2020/09/17 NodeJs
Sample script that deletes a SQL Server database
2007/06/16 Javascript
javascript学习笔记(七)Ajax和Http状态码
2014/10/08 Javascript
javascript中通过arguments参数伪装方法重载
2014/10/08 Javascript
后台获取ZTREE选中节点的方法
2015/02/12 Javascript
JavaScript面向对象之私有静态变量实例分析
2016/01/14 Javascript
原生js获取元素样式的简单方法
2016/08/06 Javascript
js入门之Function函数的使用方法【新手必看】
2016/11/22 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
2017/03/09 Javascript
Mongoose经常返回e11000 error的原因分析
2017/03/29 Javascript
详解微信小程序调起键盘性能优化
2018/07/24 Javascript
python实现批量改文件名称的方法
2015/05/25 Python
ubuntu安装mysql pycharm sublime
2018/02/20 Python
使用python Fabric动态修改远程机器hosts的方法
2018/10/26 Python
Python生成MD5值的两种方法实例分析
2019/04/26 Python
如何使用pyinstaller打包32位的exe程序
2019/05/26 Python
Python3 读取Word文件方式
2020/02/13 Python
keras自定义损失函数并且模型加载的写法介绍
2020/06/15 Python
Python自动登录QQ的实现示例
2020/08/28 Python
html5模拟平抛运动(模拟小球平抛运动过程)
2013/07/25 HTML / CSS
印度尼西亚最好的小工具在线商店:Erafone.com
2019/03/26 全球购物
Booking.com德国:预订最好的酒店和住宿
2020/02/16 全球购物
Java里面如何创建一个内部类的实例
2015/01/19 面试题
全国道德模范事迹
2014/02/01 职场文书
绩效考核实施方案
2014/03/18 职场文书
高中生国庆节演讲稿范文2014
2014/09/21 职场文书
党员民主生活会对照检查材料思想汇报
2014/09/28 职场文书
2014年青年教师工作总结
2014/12/17 职场文书
招商银行工作证明
2015/06/17 职场文书
2016年学习贯彻十八届五中全会精神心得体会
2016/01/05 职场文书
pytorch 预训练模型读取修改相关参数的填坑问题
2021/06/05 Python
详解JVM系列之内存模型
2021/06/10 Javascript
springboot利用redis、Redisson处理并发问题的操作
2021/06/18 Java/Android