下面是使用 jQuery 中的 slideDown() 和 slideUp() 方法的示例:
#box {
width: 200px;
height: 200px;
background-color: yellow;
display: none; /* 初始状态设置为隐藏 */
}
$(document).ready(function() {
// 显示 box 元素
$("#show").click(function() {
$("#box").slideDown();
});
// 隐藏 box 元素
$("#hide").click(function() {
$("#box").slideUp();
});
});
在上面的示例中,我们定义了一个大小为 200x200 像素的黄色方块,并将其初始状态设置为隐藏(display: none;)。页面上有两个按钮,分别是 "显示" 和 "隐藏"。当点击 "显示" 按钮时,使用 slideDown() 方法展示方块;当点击 "隐藏" 按钮时,使用 slideUp() 方法隐藏方块。
通过使用 slideDown() 和 slideUp() 方法,可以实现元素的平滑展示和隐藏效果。