下面是使用 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() 方法，可以實現元素的平滑展示和隱藏效果。
