jQuery方法---淡入显示与淡出隐藏

最新推荐文章于 2022-04-25 16:42:34 发布

wzh110110110

最新推荐文章于 2022-04-25 16:42:34 发布

阅读量687

点赞数

分类专栏： jQuery笔记文章标签： jquery

本文链接：https://blog.youkuaiyun.com/weixin_50652993/article/details/119735153

版权

jQuery笔记专栏收录该内容

7 篇文章

订阅专栏

jQuery方法---淡入显示与淡出隐藏

一、淡入显示
二、淡出隐藏
三、淡入显示与淡出隐藏切换
拓展：淡出淡入设置不透明度

一、淡入显示

html部分

<body>
	<div class="div_top">点击显示底部盒子</div>
	<div class="div_bottom">我是底部盒子</div>
</body>

css部分

.div_top{
	width:200px;
	height:20px;
	background-color:skyblue;
}
.div_bottom{
	width:200px;
	height:70px;
	display:none;
	background-color:skyblue;
}

js部分

$(function(){
//当点击上面的盒子时，底部的盒子会显示
	$(".div_top").click(function(){
		$(".div_bottom").fadeIn();    //括号中可使用毫秒、slow、fact
	})
});

二、淡出隐藏

html部分

<body>
	<div class="div_top">点击隐藏底部盒子</div>
	<div class="div_bottom">我是底部盒子</div>
</body>

css部分

.div_top{
	width:200px;
	height:20px;
	background-color:skyblue;
}
.div_bottom{
	width:200px;
	height:70px;
	background-color:skyblue;
}

js部分

$(function(){
//当点击上面的盒子时，底部的盒子会隐藏
	$(".div_top").click(function(){
		$(".div_bottom").fadeOut();    //括号中可使用毫秒、slow、fact
	})
});

三、淡入显示与淡出隐藏切换

html部分

<body>
	<div class="div_top">点击进行底部盒子的隐藏与切换</div>
	<div class="div_bottom">我是底部盒子</div>
</body>

css部分

.div_top{
	width:200px;
	height:20px;
	background-color:skyblue;
}
.div_bottom{
	width:200px;
	height:70px;
	display:none;
	background-color:skyblue;
}

js部分

$(function(){
//当点击上面的盒子时，底部的盒子可进行显示与隐藏的切换
	$(".div_top").click(function(){
		$(".div_bottom").fadeToggle();    //括号中可使用毫秒、slow、fact
	})
});

拓展：淡出淡入设置不透明度

html部分

<body>
	<div class="div_top">点击进设置底部盒子的不透明度</div>
	<div class="div_bottom">我是底部盒子</div>
</body>

css部分

.div_top{
	width:200px;
	height:20px;
	background-color:skyblue;
}
.div_bottom{
	width:200px;
	height:70px;
	background-color:skyblue;
}

js部分

$(function(){
//当点击上面的盒子时，底部的盒子会隐藏
	$(".div_top").click(function(){
	 //括号中的两个参数分别是变换的速度与不透明度，注意两个参数必须加上
		$(".div_bottom").fadeTo("1000",0.5);   
	})
});