jQuery实现显示/消失/渐显/渐隐功能

给我一点阳光~

于 2021-09-25 17:50:24 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML+CSS+JS 文章标签： jquery html html5 css3 前端

本文链接：https://blog.csdn.net/weixin_46415739/article/details/120474677

HTML+CSS+JS 专栏收录该内容

1 篇文章

订阅专栏

该博客详细介绍了如何使用jQuery实现元素的显示、消失、渐显和渐隐功能，包括在HTML中添加元素、设置CSS样式、导入jQuery库以及编写JavaScript脚本。通过示例代码展示了如何通过参数控制动画速度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery实现显示/消失/渐显/渐隐功能

1. 在Html的body部分定义两个input及一个div

<body>
	<input type = "button" id = shows value = "显示" onclick = "shows()"/>
	<input type = "button" id = hides value = "消失" onclick = "hides()"/>
	<div id="divs"></div>
</body>

2.在head中加入css样式：

<style type = "text/css">
	*{
		margin:0;
		padding:0;
		list-style-type:none;
	}
	#divs{
		width:100px;
		height:100px;
		background:#008B8B;
		margin-top:10px;
	}
</style>

效果如下：
在这里插入图片描述

3.导入jQuery(不做解释)

4.开始写script：

<script type="text/javascript">
		function shows() {
			// 显示
			// $('#divs').show();

			// 渐显
			$('#divs').fadeIn(1000);
		}

		function hides() {
			// 消失
			// $('#divs').hide();

			// 渐隐
			$('#divs').fadeOut(1000);
		}
</script>

完整代码展示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function shows() {
				// 显示
				// $('#divs').show();

				// 渐显
				$('#divs').fadeIn(1000);
			}

			function hides() {
				// 消失
				// $('#divs').hide();

				// 渐隐
				$('#divs').fadeOut(1000);
			}
		</script>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0;
				list-style-type: none;
			}

			#divs {
				width: 100px;
				height: 100px;
				background-color: #008B8B;
				margin-top: 10px;
			}
		</style>
	</head>
	<body>
		<input type="button" id="shows" value="显示" onclick="shows()" />
		<input type="button" id="hides" value="消失" onclick="hides()" />
		<div id="divs">

		</div>
	</body>
</html>