jQuery实现基本淡入淡出效果的方法详解


Posted in jQuery onSeptember 05, 2018

本文实例讲述了jQuery实现基本淡入淡出效果的方法。分享给大家供大家参考,具体如下:

jQuery fadeIn()方法:用于淡入已隐藏的元素

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

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
});
});
</script>
</head>
<body>
<p>演示带有不同参数的fadeIn()方法。</p>
<button>点击</button>
<br />
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
</body>
</html>

运行结果:

jQuery实现基本淡入淡出效果的方法详解

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

语法:$(selector).fadeToggle(speed,callback);

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

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

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
});
});
</script>
</head>
<body>
<button>点击</button>
<br/>
<div id="div1" style="width:80px;height:80px;background-color:red;"</div>
</body>
</html>

运行结果:

jQuery实现基本淡入淡出效果的方法详解

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

语法:$(selector).fadeTo(speed,opacity,callback);

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeTo(1000,0.2);
});
});
</script>
</head>
<body>
<button>点击</button>
<br/>
<div id="div1" style="width:80px;height:80px;background-color:red;"</div>
</body>
</html>

运行结果:

jQuery实现基本淡入淡出效果的方法详解

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

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

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

jQuery 相关文章推荐
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
jquery.form.js异步提交表单详解
Apr 25 jQuery
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
jQuery实现鼠标拖动图片功能
Mar 04 jQuery
jquery获取元素到屏幕四周可视距离的方法
Sep 05 #jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 #jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 #jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 #jQuery
jQuery常见的遍历DOM操作详解
Sep 05 #jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 #jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 #jQuery
You might like
IIS6的PHP最佳配置方法
2007/03/19 PHP
ThinkPHP分页实例
2014/10/15 PHP
PHP常见漏洞攻击分析
2016/02/21 PHP
php求数组全排列,元素所有组合的方法
2016/05/05 PHP
PHP 返回13位时间戳的实现代码
2016/05/13 PHP
php 如何设置一个严格控制过期时间的session
2017/05/05 PHP
jquery创建div 实现代码
2009/04/27 Javascript
jquery 学习笔记一
2010/04/07 Javascript
js 通用javascript函数库整理
2011/08/14 Javascript
jquery实现商品拖动选择效果代码(自写)
2013/05/28 Javascript
js怎么终止程序return不行换jfslk
2013/05/30 Javascript
解析JavaScript中点号“.”的多义性
2013/12/02 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
2014/01/27 Javascript
获取JS中网页各种高宽与位置的方法总结
2016/07/27 Javascript
强大Vue.js组件浅析
2016/09/12 Javascript
jquery事件绑定解绑机制源码解析
2016/09/19 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
2017/03/04 Javascript
vue2.0 axios前后端数据处理实例代码
2017/06/30 Javascript
vue iView 上传组件之手动上传功能
2018/03/16 Javascript
深入了解javascript 数组的sort方法
2018/06/01 Javascript
vue权限问题的完美解决方案
2019/05/08 Javascript
微信小程序与webview交互实现支付功能
2019/06/07 Javascript
Vue使用自定义指令实现拖拽行为实例分析
2020/06/06 Javascript
vue2.0实现列表数据增加和删除
2020/06/17 Javascript
Vue基于localStorage存储信息代码实例
2020/11/16 Javascript
[57:09]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第一场 1月26日
2021/03/11 DOTA
Python简单实现Base64编码和解码的方法
2017/04/29 Python
Python实现矩阵相乘的三种方法小结
2018/07/26 Python
用uWSGI和Nginx部署Flask项目的方法示例
2019/05/05 Python
俄罗斯眼镜网: optikaworld
2016/07/31 全球购物
聘用意向书
2014/07/29 职场文书
建国大业观后感800字
2015/06/01 职场文书
2016天猫双十一广告语
2016/01/28 职场文书
一篇文章带你搞懂Python类的相关知识
2021/05/20 Python
vue elementUI批量上传文件
2022/04/26 Vue.js
Python使用openpyxl模块处理Excel文件
2022/06/05 Python