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+pjax简单示例汇总
Apr 21 jQuery
jQuery tip提示插件(实例分享)
Apr 28 jQuery
jQuery树插件zTree使用方法详解
May 02 jQuery
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 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中的file_get_contents获取远程页面乱码的问题
2013/06/25 PHP
PHP基于GD库的缩略图生成代码(支持jpg,gif,png格式)
2014/06/19 PHP
对xmlHttp对象方法和属性的理解
2011/01/17 Javascript
javascript 主动派发事件总结
2011/08/09 Javascript
js精度溢出解决方案
2012/12/02 Javascript
禁止空格提交表单的js代码
2013/11/17 Javascript
JS cookie中文乱码解决方法
2014/01/28 Javascript
js function定义函数的几种不错方法
2014/02/27 Javascript
node.js开机自启动脚本文件
2014/12/24 Javascript
js实现屏幕自适应局部代码分享
2015/01/30 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
2015/03/04 Javascript
浅谈Jquery核心函数
2015/06/18 Javascript
freemarker判断对象是否为空的方法
2015/08/13 Javascript
简单实现js选项卡切换效果
2017/02/09 Javascript
js中的 || 与 &amp;&amp; 运算符详解
2018/05/24 Javascript
浅谈Node.js 中间件模式
2018/06/12 Javascript
使用svg实现动态时钟效果
2018/07/17 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
2019/04/28 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
2020/05/27 Javascript
Python配置文件解析模块ConfigParser使用实例
2015/04/13 Python
Python竟能画这么漂亮的花,帅呆了(代码分享)
2017/11/15 Python
详解Pytorch 使用Pytorch拟合多项式(多项式回归)
2018/05/24 Python
Django框架实现的普通登录案例【使用POST方法】
2019/05/15 Python
python retrying模块的使用方法详解
2019/09/25 Python
Python3标准库之dbm UNIX键-值数据库问题
2020/03/24 Python
Python利用imshow制作自定义渐变填充柱状图(colorbar)
2020/12/10 Python
医院合作协议书
2014/08/19 职场文书
竞聘演讲稿怎么写
2014/08/28 职场文书
房屋分割离婚协议书范本
2014/12/01 职场文书
2014年社区教育工作总结
2014/12/02 职场文书
自主招生自荐信范文
2015/03/04 职场文书
2015年医院保卫科工作总结
2015/07/23 职场文书
2016优秀班主任个人先进事迹材料
2016/02/26 职场文书
写给汽车4S店的创业计划书,拿来即用!
2019/08/09 职场文书
《自然之道》读后感3篇
2019/12/17 职场文书
js前端设计模式优化50%表单校验代码示例
2022/06/21 Javascript