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 校验中国身份证号码实例详解
Apr 11 jQuery
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
jQuery validata插件实现方法
Jun 25 jQuery
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
JQueryDOM之样式操作
Mar 27 jQuery
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
jquery实现有过渡效果的tab切换
Jul 17 jQuery
JQuery基于FormData异步提交数据文件
Sep 01 jQuery
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 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
建立动态的WML站点(三)
2006/10/09 PHP
PHP封装分页函数实现文本分页和数字分页
2014/10/23 PHP
一个简单的jQuery插件制作 学习过程及实例
2010/04/25 Javascript
kmock javascript 单元测试代码
2011/02/06 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
2013/06/17 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
2014/03/08 Javascript
js如何判断用户是否是用微信浏览器
2014/06/05 Javascript
IE浏览器不支持getElementsByClassName的解决方法
2014/08/27 Javascript
DOM基础教程之使用DOM控制表格
2015/01/20 Javascript
分享9点个人认为比较重要的javascript 编程技巧
2015/04/27 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
2016/12/30 Javascript
基于JS实现bookstore静态页面的实例代码
2017/02/22 Javascript
AngularJS实现自定义指令及指令配置项的方法
2017/11/20 Javascript
基于vue2实现上拉加载功能
2017/11/28 Javascript
BootstrapValidator验证用户名已存在(ajax)
2019/11/08 Javascript
[01:30]DOTA2上海特锦赛现场采访 Loda倾情献唱
2016/03/25 DOTA
python字典get()方法用法分析
2015/04/17 Python
详解Python中列表和元祖的使用方法
2015/04/25 Python
Python字符编码与函数的基本使用方法
2017/09/30 Python
基于Python实现的微信好友数据分析
2018/02/26 Python
python 字符串和整数的转换方法
2018/06/25 Python
深入浅析Python传值与传址
2018/07/10 Python
浅谈pytorch grad_fn以及权重梯度不更新的问题
2019/08/20 Python
详解基于python的多张不同宽高图片拼接成大图
2019/09/26 Python
Python高级编程之消息队列(Queue)与进程池(Pool)实例详解
2019/11/01 Python
pycharm不能运行.py文件的解决方法
2020/02/12 Python
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
2018/01/10 HTML / CSS
基于canvas的骨骼动画的示例代码
2018/06/12 HTML / CSS
Swanson中国官网:美国斯旺森健康产品公司
2021/03/01 全球购物
交通安全演讲稿
2014/01/07 职场文书
国际商务专业职业生涯规划书范文
2014/01/17 职场文书
养牛场项目建议书
2014/05/13 职场文书
设备售后服务承诺书
2014/05/30 职场文书
电子商务优秀毕业生求职信
2014/07/11 职场文书
领导班子整改方案
2014/10/25 职场文书
在Centos 8.0中安装Redis服务器的教程详解
2022/03/21 Redis