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中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
利用jQuery解析获取JSON数据
Apr 08 jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
jquery实现上传文件进度条
Mar 26 jQuery
Jquery高级应用Deferred对象原理及使用实例
May 28 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
使用bcompiler对PHP文件进行加密的代码
2010/08/29 PHP
详解PHP+AJAX无刷新分页实现方法
2015/11/03 PHP
PHP开发中常用的十个代码样例
2016/02/02 PHP
PHP实现的微信APP支付功能示例【基于TP5框架】
2019/09/16 PHP
JavaScript脚本语言在网页中的简单应用
2007/05/13 Javascript
javascript 动态设置已知select的option的value值的代码
2009/12/16 Javascript
js实现拖拽 闭包函数详细介绍
2012/11/25 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
2014/03/13 Javascript
中文输入法不触发onkeyup事件的解决办法
2014/07/09 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
2016/01/04 Javascript
js与applet相互调用的方法
2016/06/22 Javascript
jsp 网站引入外部css或者js失效问题解决
2016/10/31 Javascript
js面向对象编程总结
2017/02/16 Javascript
js实现数字递增特效【仿支付宝我的财富】
2017/05/05 Javascript
Vue学习笔记进阶篇之单元素过度
2017/07/19 Javascript
详解如何实现一个简单的 vuex
2018/02/10 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
2018/03/16 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
2019/09/23 Javascript
Nest.js散列与加密实例详解
2021/02/24 Javascript
[01:04:39]OG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python中__new__与__init__方法的区别详解
2015/05/04 Python
Python创建xml文件示例
2017/03/22 Python
Python中的TCP socket写法示例
2018/05/11 Python
python 字段拆分详解
2019/12/17 Python
python打印文件的前几行或最后几行教程
2020/02/13 Python
python 检测nginx服务邮件报警的脚本
2020/12/31 Python
python基于opencv 实现图像时钟
2021/01/04 Python
Django权限控制的使用
2021/01/07 Python
澳大利亚玩具剧场:Toy Playhouse
2019/03/03 全球购物
副总经理工作职责
2013/11/28 职场文书
校优秀毕业生主要事迹
2014/05/26 职场文书
医院深入开展党的群众路线教育实践活动实施方案
2014/08/27 职场文书
售后服务承诺函格式
2015/01/21 职场文书
2015年店长工作总结范文
2015/04/08 职场文书
2015年信息宣传工作总结
2015/05/26 职场文书
Window server中安装Redis的超详细教程
2021/11/17 Redis