直接上代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<script>
function hideFn() {
// $("#showDiv").hide(5000,"linear");//隐藏匹配元素
// $("#showDiv").slideUp(5000,"linear");//上升
$("#showDiv").fadeOut(5000,"linear",function () {
//fadeOut通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
alert("隐藏完毕");
});
}
function showFn() {
//$("#showDiv").show(5000,"linear");显示隐藏匹配元素
//$("#showDiv").slideDown(5000,"linear");//下落
$("#showDiv").fadeIn(5000,"linear",function () {
// fadeIn通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
alert("显示完毕");
});//淡入淡出
}
function toggleFn() {
// $("#showDiv").toggle(500);//toggle用于绑定两个或多个事件处理器函数，
//以 响应被选元素的轮流的 click 事件。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，
//换为为可见的。
// $("#showDiv").slideToggle(500);
//slideToggle通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
$("#showDiv").fadeToggle(500);
//fadeToggle通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个
//回调函数。
}
</script>
<input type="button" value="隐藏" onclick="hideFn()">
<input type="button" value="显示" onclick="showFn()">
<input type="button" value="切换" onclick="toggleFn()">
<div id="showDiv" style="width:300px;height: 300px;background-color: pink">
显示和隐藏
</div>
</body>
</html>
效果图：
