jQuery中slidedown与slideup方法用法示例

lewis 7年前 (2018-12-11) 阅读数 10 #程序编程

文章标签 jquery

下面是使用 jQuery 中的 slideDown() 和 slideUp() 方法的示例：

<!DOCTYPEhtml><html>
<head>
<scriptsrc="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>
<buttonid="show">显示</button>
<buttonid="hide">隐藏</button>
<divid="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() 方法，可以实现元素的平滑展示和隐藏效果。