<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.7.1.js"></script>
<style>
#showDiv {
width: 300px;
height: 300px;
background-color: blue;
}
</style>
</head>
<body>
<input type="button" value="点击按钮隐藏div" onclick="hideFn()">
<input type="button" value="点击按钮显示div" onclick="showFn()">
<input type="button" value="点击按钮显示与隐藏div之间来回切换" onclick="toggleFn()">
<input type="button" value="设置标签的透明度" onclick="fadetoFn()">
<br><br>
<div id="showDiv">显示和隐藏</div>
<script>
function hideFn() {
$('#showDiv').fadeOut(2000)
}
function showFn() {
$('#showDiv').fadeIn(2000)
}
function toggleFn() {
$('#showDiv').fadeToggle(2000)
}
function fadetoFn() {
$('#showDiv').fadeTo(2000, 0.5)
}
</script>
</body>
</html>
点击第一个按钮,隐藏:
点击第二个按钮,显示:
点击第3个按钮显示与隐藏之间切换。
点击第四个按钮,改变透明度: