<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="../../Scripts/jquery-3.4.1.min.js"></script>
<script src="Index.js"></script>
<link type="text/css" rel="stylesheet" href="Style.css"/>
</head>
<body>
<!--------------隐藏显示----------------->
<p>hello</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
<button id="toggle">隐藏/显示</button>
<script>
for (var i = 0; i < 5; i++) {
$("<div>").appendTo(document.body);
}
$("div").click(function () {
$(this).hide(2000, function () {
$(this).remove();//每点击一个，消失之后，移除掉当前对象
});//每一个都隐藏，使用this
});//点击消失
</script>
<!--------------隐藏显示----------------->
</body>
</html>
div {
background: #ece023;
width: 50px;
height: 50px;
margin: 2px; /*外边距2px*/
float: left; /*向左浮动*/
}
JS文件：
$(document).ready(function () {
$("#hide").click(function () {
$("p").hide(1000);//隐藏,可以加时间参数
});
$("#show").click(function () {
$("p").show(1000);//显示,可以加时间参数
});
$("#toggle").click(function () {
$("p").toggle(1000);//隐藏与显示
});
});
标签：jQuery,function,显示,hide,效果,click,隐藏,1000 From： https://www.cnblogs.com/Mandy-ZQ-Ma/p/17357403.html