jquery淡入淡出

最新推荐文章于 2024-11-04 07:45:03 发布

是小王啊i

最新推荐文章于 2024-11-04 07:45:03 发布

阅读量94

点赞数

文章标签： jquery js css

本文链接：https://blog.csdn.net/qq_45378970/article/details/108902991

版权

jquery 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

复制以下代码查看效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div:first-of-type{background:red;
			width:66px;
			height:66px;}
			div:nth-of-type(2){
				width:66px;
				height:66px;
				background: blue;
			}
			div:last-of-type{
				width:66px;
				height:66px;
				background: yellow;
			}
		</style>
		<script type="text/javascript" src="./jquery-3.4.1/jquery-3.4.1.js"></script>
	</head>
	<body>
		<div id="a1"></div>
		<div id="a2">
		</div>
		<div id="a3">
		</div>
		<button type="button">点我点我</button>
		<script type="text/javascript">
			$(function(){
				$('button').click(function(){
					$('#a1').fadeToggle();
				})
			})
			/*fadeIn()用于淡入已隐藏的元素
			fadeOut()用于淡出可见元素
			fadeToggle 淡入淡出
			fadeTo(speed,opacity,callback)
			opacity透明度0-1之间*/
		</script>
	</body>
</html>