jQuery带有三种方便的方法来轻松创建滑动效果。
- slideUp（）–隐藏具有向上滑动效果的匹配元素。
- slideDown（）–显示具有向下滑动效果的匹配元素。
- slideToggle（）–如果显示匹配的元素，它将隐藏并具有上滑效果； 如果隐藏，它将以向下滑动效果显示。
以上三种方法都是将支持持续时间作为参数：慢速，快速或精确毫秒。 如果省略此参数，则默认为400毫秒。
自己尝试
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
.slideDownbox, .slideUpbox, .slideTogglebox{
float:left;
padding:8px;
margin:16px;
border:1px solid red;
width:200px;
height:50px;
background-color:#000000;
color:white;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<h1>jQuery slideUp(), slideDown() and slideToggle() example</h1>
<div class="clear">
<h2>slideDown() example</h2>
<div class="slideDownbox">
Click me - slideDown()
</div>
<div class="slideDownbox">
Click me - slideDown()
</div>
</div>
<div class="clear">
<h2>slideUp() example</h2>
<div class="slideUpbox">
Click me - slideUp()
</div>
<div class="slideUpbox">
Click me - slideUp()
</div>
</div>
<div class="clear">
<h2>slideToggle() example</h2> <button id=slideToggle>slideToggle()</button>
<br/>
<div class="slideTogglebox">
slideToggle()
</div>
<div class="slideTogglebox">
slideToggle()
</div>
</div>
<br/><br/>
<div class="clear">
<button id=reset>Reset</button>
</div>
<script type="text/javascript">
$(".slideDownbox").click(function () {
$(this).hide().slideDown('slow');
});
$(".slideUpbox").click(function () {
$(this).slideUp(2000);
});
$("#slideToggle").click(function () {
$('.slideTogglebox').slideToggle();
});
$("#reset").click(function(){
location.reload();
});
</script>
</body>
</html>翻译自: https://mkyong.com/jquery/jquery-slideup-slidedown-and-slidetoggle-example/