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 21 jQuery
jQuery实现简单的手风琴效果
Apr 17 jQuery
使用 jQuery 实现表单验证功能
Jul 05 jQuery
jQuery常用选择器详解
Jul 17 jQuery
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 jQuery
jQuery实现简单飞机大战
Jul 05 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的垃圾回收机制详解
2013/10/28 PHP
php输出文字乱码的解决方法
2019/10/04 PHP
PHP的HTTP客户端Guzzle简单使用方法分析
2019/10/30 PHP
JavaScript 解析读取XML文档 实例代码
2009/07/07 Javascript
jQuery初学:find()方法及children方法的区别分析
2011/01/31 Javascript
asp.net刷新本页面的六种方法总结
2014/01/07 Javascript
jQuery获取节点和子节点文本的方法
2014/07/22 Javascript
如何改进javascript代码的性能
2015/04/02 Javascript
在 Angular 中实现搜索关键字高亮示例
2017/03/21 Javascript
微信小程序下拉刷新界面的实现
2017/09/28 Javascript
用React实现一个完整的TodoList的示例代码
2017/10/30 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
微信小程序webview 脚手架使用详解
2019/07/22 Javascript
微信小程序 简易计算器实现代码实例
2019/09/02 Javascript
使用xampp将angular项目运行在web服务器的教程
2019/09/16 Javascript
layui table 表格模板按钮的实例代码
2019/09/21 Javascript
关于javascript中的promise的用法和注意事项(推荐)
2021/01/15 Javascript
使用Python脚本在Linux下实现部分Bash Shell的教程
2015/04/17 Python
python利用sklearn包编写决策树源代码
2017/12/21 Python
Python创建普通菜单示例【基于win32ui模块】
2018/05/09 Python
python爬取淘宝商品销量信息
2018/11/16 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
python pyenv多版本管理工具的使用
2019/12/23 Python
Python实现猜年龄游戏代码实例
2020/03/25 Python
python音频处理的示例详解
2020/12/23 Python
味多美官网:蛋糕订购,100%使用天然奶油
2017/11/10 全球购物
FLIR美国官网:热成像, 夜视和红外摄像系统
2018/07/13 全球购物
英国索普公园票务和酒店套餐:Thorpe Breaks
2019/09/14 全球购物
影视制作岗位职责
2013/12/04 职场文书
小学生演讲稿
2014/01/12 职场文书
幼儿园亲子活动方案
2014/01/29 职场文书
员工考核管理制度
2014/02/02 职场文书
社团活动总结范文
2014/04/26 职场文书
奠基仪式策划方案
2014/05/15 职场文书
2015最新婚礼司仪主持词
2015/06/30 职场文书
《检阅》教学反思
2016/02/22 职场文书