toggle() 方法在被选元素上进行 hide() 和 show() 之间的切换。
fadeIn() 方法逐渐改变被选元素的不透明度，从隐藏到可见（褪色效果）。
fadeOut() 方法逐渐改变被选元素的不透明度，从可见到隐藏（褪色效果）。
fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换。
slideDown() 方法以滑动方式显示被选元素。
slideUp() 方法以滑动方式隐藏被选元素。
slideToggle() 方法在被选元素上进行 slideUp() 和 slideDown() 之间的切换。
代码块：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.6.0.js"></script>
<script>
$(function() {
$("#a").click(function() {
$("div").toggle("1000");
})
$("#a1").click(function() {
$("div").fadeIn("1000");
})
$("#a2").click(function() {
$("div").fadeOut("1000");
})
$("#a3").click(function() {
$("div").fadeToggle("1000");
})
$("#a4").click(function() {
$("div").slideDown("1000");
})
$("#a5").click(function() {
$("div").slideUp("1000");
})
$("#a6").click(function() {
$("div").slideToggle("1000");
})
})
</script>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
display: none;
}
</style>
</head>
<body>
<button id="a">显示隐藏</button>
<button id="a1">淡入</button>
<button id="a2">淡出</button>
<button id="a3">淡入淡出</button>
<button id="a4">下渐出</button>
<button id="a5">上渐入</button>
<button id="a6">渐出渐入切换</button>
<div></div>
</body>
</html>运行效果:
7933
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
