JS显示与隐藏的效果，淡入淡出的效果

最新推荐文章于 2022-03-08 16:24:24 发布

Fw·白

最新推荐文章于 2022-03-08 16:24:24 发布

阅读量930

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_45189658/article/details/103219217

版权

JavaScript 专栏收录该内容

8 篇文章 3 订阅

订阅专栏

可做到瞬间显示，慢慢显示，瞬间隐藏，慢慢隐藏和显示与隐藏的切换。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.div1{
				width: 200px;
				height: 200px;
				background: red;
				position: absolute;
				top: 100px;
				left: 100px;
				display: none;
			}
		</style>
	</head>
	<body>
		<button id="btn1">瞬间显示</button>
		<button id="btn2">慢慢显示</button>
		<button id="btn3">瞬间隐藏</button>
		<button id="btn4">慢慢隐藏</button>
		<button id="btn5">显示隐藏切换</button>
		<div class="div1"></div>
	</body>
	<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
			$("#btn1").click(function(){
				$(".div1").show();
			})
			$("#btn2").click(function(){
				$(".div1").show(2000);
			})
			$("#btn3").click(function(){
				$(".div1").hide();
			})
			$("#btn4").click(function(){
				$(".div1").hide(2000);
			})
			$("#btn5").click(function(){
				$(".div1").toggle(2000);
			})
		})
	</script>
</html>

淡入，淡出的效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.div1{
				width: 200px;
				height: 200px;
				background: red;
				position: absolute;
				top: 100px;
				left: 100px;
			}
		</style>
	</head>
	<body>
		<button id="btn1">淡出</button>
		<button id="btn2">淡入</button>
		<button id="btn3">淡入淡出切换</button>
		<div class="div1"></div>
	</body>
	<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
			$("#btn1").click(function(){
				$(".div1").fadeOut(2000);
			})
			$("#btn2").click(function(){
				$(".div1").fadeIn(2000);
			})
			$("#btn3").click(function(){
				$(".div1").fadeToggle(2000);
			})
		})
	</script>
</html>

Fw·白

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS显示与隐藏的效果，淡入淡出的效果

可做到瞬间显示，慢慢显示，瞬间隐藏，慢慢隐藏和显示与隐藏的切换。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; ...
复制链接

扫一扫