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实现二级联动效果
Mar 30 jQuery
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
jQuery自动或手动图片切换效果
Oct 11 jQuery
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
jQuery带控制按钮轮播图插件
Jul 31 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自动注册登录验证机制实现代码
2011/12/20 PHP
支持中文的PHP按字符串长度分割成数组代码
2015/05/17 PHP
php-fpm服务启动脚本的方法
2018/04/27 PHP
用于table内容排序
2006/07/21 Javascript
xml 封装与解析(javascript和C#中)
2009/07/26 Javascript
键盘 keycode的值 javascript时触发事件时很有用的要素
2009/11/02 Javascript
javascript 动态生成私有变量访问器
2009/12/06 Javascript
javascript中使用css需要注意的地方小结
2010/09/01 Javascript
jquery 全局AJAX事件使用代码
2010/11/05 Javascript
javascript 应用小技巧方法汇总
2015/07/05 Javascript
6种javascript显示当前系统时间代码
2015/12/01 Javascript
AngularJS使用指令增强标准表单元素功能
2016/07/01 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
2017/08/11 Javascript
ES6中的Promise代码详解
2017/10/09 Javascript
详解如何在vue项目中使用layui框架及采坑
2019/05/05 Javascript
如何实现双向绑定mvvm的原理实现
2019/05/28 Javascript
深入webpack打包原理及loader和plugin的实现
2020/05/06 Javascript
Vue实现点击导航栏当前标签后变色功能
2020/08/19 Javascript
[52:52]完美世界DOTA2联赛PWL S3 LBZS vs access 第一场 12.10
2020/12/13 DOTA
[41:21]夜魇凡尔赛茶话会 第三期02:看图识人
2021/03/11 DOTA
使用python根据端口号关闭进程的方法
2018/11/06 Python
pyqt5 tablewidget 利用线程动态刷新数据的方法
2019/06/17 Python
Python django框架输入汉字,数字,字符生成二维码实现详解
2019/09/24 Python
python语言线程标准库threading.local解读总结
2019/11/10 Python
Kears 使用:通过回调函数保存最佳准确率下的模型操作
2020/06/17 Python
pyspark对Mysql数据库进行读写的实现
2020/12/30 Python
python 如何在测试中使用 Mock
2021/03/01 Python
C#和SQL Server的面试题
2016/08/12 面试题
护理专业应届毕业生推荐信
2013/11/15 职场文书
物理课外活动总结
2014/08/27 职场文书
高三英语教学计划
2015/01/23 职场文书
银行优秀员工推荐信
2015/03/24 职场文书
导游词之桂林山水
2019/09/20 职场文书
血轮眼轮回眼特效 html+css
2021/03/31 HTML / CSS
Java 使用类型为Object的变量指向任意类型的对象
2022/04/13 Java/Android
Android开发 使用文件储存的方式保存QQ密码
2022/04/24 Java/Android