Jquery Fade用法详解


Posted in jQuery onNovember 06, 2020

jquery淡入淡出演示

感觉用法都差不多,目前看来还比较简单。
fadeIn
fadeOut
fadeToggle
fadeTo
一共4种用法

CSS代码

<style>
		div{background-color:#eaeaea;border:solid 1px #999999;width:100px;height:100px;text-align:center;line-height:100px;font-size:16px;display:none;margin:10px;}
	</style>

JS代码

<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#one").click(function(){
				$("#con_a").fadeIn(100);
				$("#con_b").fadeIn(500);
				$("#con_c").fadeIn(1000);
			});
			$("#two").click(function(){
				$("#con_a").fadeOut(100);
				$("#con_b").fadeOut(500);
				$("#con_c").fadeOut(1000);
			});
			$("#three").click(function(){
				$("#con_a").fadeToggle(100);
				$("#con_b").fadeToggle(500);
				$("#con_c").fadeToggle(1000);
			});
			$("#four").click(function(){
				$("#con_a").fadeTo("slow",0.5);
				$("#con_b").fadeTo("slow",0.7);
				$("#con_c").fadeTo("slow",0.9);
			});
		});
	</script>

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Jquery Fade demo</title>
	<style>
		div{background-color:#eaeaea;border:solid 1px #999999;width:100px;height:100px;text-align:center;line-height:100px;font-size:16px;display:none;margin:10px;}
	</style>
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#one").click(function(){
				$("#con_a").fadeIn(100);
				$("#con_b").fadeIn(500);
				$("#con_c").fadeIn(1000);
			});
			$("#two").click(function(){
				$("#con_a").fadeOut(100);
				$("#con_b").fadeOut(500);
				$("#con_c").fadeOut(1000);
			});
			$("#three").click(function(){
				$("#con_a").fadeToggle(100);
				$("#con_b").fadeToggle(500);
				$("#con_c").fadeToggle(1000);
			});
			$("#four").click(function(){
				$("#con_a").fadeTo("slow",0.5);
				$("#con_b").fadeTo("slow",0.7);
				$("#con_c").fadeTo("slow",0.9);
			});
		});
	</script>
</head>
<body>
	<h1>Jquery淡入淡出演示</h1>
	<button id="one">点击我淡入</button>
	<button id="two">点击我淡出</button>
	<button id="three">点击我切换淡入淡出</button>
	<button id="four">透明度</button>
	<div id="con_a">1</div>
	<div id="con_b">2</div>
	<div id="con_c">3</div>
</body>
</html>

效果图

Jquery Fade用法详解

到此这篇关于Jquery Fade用法详解的文章就介绍到这了,更多相关Jquery Fade用法内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

jQuery 相关文章推荐
使用jQuery实现购物车结算功能
Aug 15 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
jquery实现动态添加附件功能
Oct 23 jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
jquery 验证用户名是否重复代码实例
May 14 jQuery
jquery将json转为数据字典的实例代码
Oct 11 jQuery
Jquery异步上传文件代码实例
Nov 13 jQuery
jQuery实现轮播图效果demo
Jan 11 jQuery
jquery实现的放大镜效果示例
Feb 24 jQuery
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
jQuery列表动态增加和删除的实现方法
Nov 05 #jQuery
使用jQuery实现购物车
Oct 29 #jQuery
jQuery实现简单评论区功能
Oct 26 #jQuery
jquery插件懒加载的示例
Oct 24 #jQuery
jquery实现异步文件上传ajaxfileupload.js
Oct 23 #jQuery
jquery实现抽奖功能
Oct 22 #jQuery
jQuery实现可以计算进制转换的计算器
Oct 19 #jQuery
You might like
php adodb连接带密码access数据库实例,测试成功
2008/05/14 PHP
php过滤危险html代码
2008/08/18 PHP
Joomla数据库操作之JFactory::getDBO用法
2016/05/05 PHP
js脚本学习 比较实用的基础
2006/09/07 Javascript
jscript之Read an Excel Spreadsheet
2007/06/13 Javascript
理清apply(),call()的区别和关系
2011/08/14 Javascript
javascript相等运算符与等同运算符详细介绍
2013/11/09 Javascript
javascript类型转换使用方法
2014/02/08 Javascript
详细解读JavaScript的跨浏览器事件处理
2015/08/12 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
2016/04/05 Javascript
js实现文字截断功能
2016/09/14 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
2016/09/28 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
2016/10/24 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
2018/07/09 jQuery
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
2018/11/28 Javascript
layUI的验证码功能及校验实例
2019/10/25 Javascript
解决vue-cli 打包后自定义动画未执行的问题
2019/11/12 Javascript
微信小程序音乐播放器开发
2019/11/20 Javascript
JS常用排序方法实例代码解析
2020/03/03 Javascript
vue父子组件间引用之$parent、$children
2020/05/20 Javascript
python操作mongodb根据_id查询数据的实现方法
2015/05/20 Python
Python函数式编程指南(三):迭代器详解
2015/06/24 Python
python使用Matplotlib画饼图
2018/09/25 Python
python初学者,用python实现基本的学生管理系统(python3)代码实例
2019/04/10 Python
python3中property使用方法详解
2019/04/23 Python
python 一个figure上显示多个图像的实例
2019/07/08 Python
PyQt5中多线程模块QThread使用方法的实现
2020/01/31 Python
appium+python adb常用命令分享
2020/03/06 Python
Python GUI编程学习笔记之tkinter中messagebox、filedialog控件用法详解
2020/03/30 Python
完美解决python针对hdfs上传和下载的问题
2020/06/05 Python
Python局部变量与全局变量区别原理解析
2020/07/14 Python
python 中 .py文件 转 .pyd文件的操作
2021/03/04 Python
HTML5适合的情人节礼物有纪念日期功能
2021/01/25 HTML / CSS
Bealls Florida百货商店:生活服饰、家居装饰和鞋子
2018/02/23 全球购物
Stutterheim瑞典:瑞典高级外套时装品牌
2019/06/24 全球购物
销售岗位职责范本
2014/06/12 职场文书