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插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
jQuery正则验证注册页面经典实例
Jun 10 jQuery
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
jquery图片预览插件实现方法详解
Jul 18 jQuery
Jquery实现获取子元素的方法分析
Aug 24 jQuery
jQuery实现可编辑的表格
Dec 11 jQuery
jQuery实现影院选座订座效果
Apr 13 jQuery
html中两种获取标签内的值的方法
Jun 16 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操作mysql函数详解,mysql和php交互函数
2011/05/19 PHP
PHP实现货币换算的方法
2014/11/29 PHP
PHP实现的一致性哈希算法完整实例
2015/11/14 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
laravel框架 laravel-admin上传图片到oss的方法
2019/10/13 PHP
在页面上点击任一链接时触发一个事件的代码
2007/04/07 Javascript
jQuery 页面载入进度条实现代码
2009/02/08 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
基于jquery的固定表头和列头的代码
2012/05/03 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
2012/09/19 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
2013/02/22 Javascript
在jQuery中处理XML数据的大致方法
2015/08/14 Javascript
javascript实现移动端上的触屏拖拽功能
2016/03/04 Javascript
基于jquery实现百度新闻导航菜单滑动动画
2016/03/15 Javascript
Boostrap模态窗口的学习小结
2016/03/28 Javascript
JS实现漂亮的时间选择框效果
2016/08/20 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
angular 用拦截器统一处理http请求和响应的方法
2017/06/08 Javascript
AngularJS的ng-click传参的方法
2017/06/19 Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
2018/03/10 Javascript
详解Javascript中new()到底做了些什么?
2018/03/29 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
2018/07/09 Javascript
[06:44]2018DOTA2亚洲邀请赛4.5 SOLO赛 MidOne vs Sumail
2018/04/06 DOTA
使用grappelli为django admin后台添加模板
2014/11/18 Python
Python实现抓取百度搜索结果页的网站标题信息
2015/01/22 Python
Python中使用Flask、MongoDB搭建简易图片服务器
2015/02/04 Python
Python中常用操作字符串的函数与方法总结
2016/02/04 Python
django反向解析和正向解析的方式
2018/06/05 Python
Python爬虫包BeautifulSoup实例(三)
2018/06/17 Python
Python和Java的语法对比分析语法简洁上python的确完美胜出
2019/05/10 Python
对python 树状嵌套结构的实现思路详解
2019/08/09 Python
python数值基础知识浅析
2019/11/19 Python
python求前n个阶乘的和实例
2020/04/02 Python
环境整治工作方案
2014/05/18 职场文书
企业人事任命书
2014/06/05 职场文书
工商局领导班子存在的问题整改措施思想汇报
2014/10/05 职场文书