下面是使用 jQuery 中的 slideDown() 和 slideUp() 方法的示例：
<!DOCTYPE html><html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#box {
width: 200px;
height: 200px;
background-color: yellow;
display: none; /* 初始状态设置为隐藏 */
}
</style>
</head>
<body>
<button id="show">显示</button>
<button id="hide">隐藏</button>
<div id="box"></div>
<script>
$(document).ready(function() {
// 显示 box 元素
$("#show").click(function() {
$("#box").slideDown();
});
// 隐藏 box 元素
$("#hide").click(function() {
$("#box").slideUp();
});
});
</script>
</body>
</html>
在上面的示例中，我们定义了一个大小为 200x200 像素的黄色方块，并将其初始状态设置为隐藏（display: none;）。页面上有两个按钮，分别是 "显示" 和 "隐藏"。当点击 "显示" 按钮时，使用 slideDown() 方法展示方块；当点击 "隐藏" 按钮时，使用 slideUp() 方法隐藏方块。
通过使用 slideDown() 和 slideUp() 方法，可以实现元素的平滑展示和隐藏效果。