slideDown(), slideUp(), slideToggle().
slideDown()滑动方法用于向下滑动元素，语法为：
speed可以规定效果的时长，分别有” slow“,"fast"或者”毫秒“； callback是滑动完成后所执行的函数。
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>jQuery中元素动作向下滑动</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/jquery-3.2.1.min.js"></script>
<style>
div.panel,p.mainContent{
background:#e5eecc;
margin:0px;
padding:5px;
text-align:center;
border:solid 1px #3c3c3c;
}
div.panel{
height:120px;
display:none;
}
</style>
</head>
<body>
<div class="panel">
<p>时间如白驹过隙，稍纵即逝</p>
<p>抓住时间的尾巴，我们永不放弃</p>
</div>
<p class="mainContent">点击进行向下滑动</p>
<script>
$(document).ready(function(){
$(".mainContent").click(function(){
$(".panel").slideDown();
});
});
</script>
</body>
</html>效果如下图所示：点击前
点击后，向下滑动：
slideUp()方法是用于向上滑动元素，语法为 $(selector).slideUp(speed,callback);元素就不一一解释，跟1相同。
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>jQuery中slideUp（）方法控制元素向上滑动</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/jquery-3.2.1.min.js"></script>
<style>
div.panel,p.mainContent{
margin:0px;
padding:5px;
background:#e5eecc;
text-align:center;
border:solid 1px #3c3c3c;
}
div.panel{
height:120px;
}
</style>
</head>
<body>
<div class="panel">
<p>流星一样的梦，看着天空沉静，总觉得一切很安然，没有人打扰真好</p>
<p>你说你还是喜欢有人的地方，因为你害怕孤独</p>
</div>
<p class="mainContent">点击按钮内容向上滑动</p>
<script>
$(document).ready(function(){
$(".mainContent").click(function(){
$(".panel").slideUp();
})
})
</script>
</body>
</html>
slideToggle()方法可以在slideDown()和slideUp()之间切换。
演示代码如下图所示
<!DOCTYPE html>
<html>
<head>
<title>元素框可以随意切换</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/jquery-3.2.1.min.js"></script>
<style>
div.panel,p.mainContent{
margin:0px;
padding:5px;
background:#e5eecc;
border:solid 1px #3c3c3c;
text-align:center;
}
div.panel{
height:120px;
}
</style>
</head>
<body>
<div class="panel">
<p>我想江南，江南是否也曾想到我</p>
<p>理解自己的事情，看到美好的事情</p>
</div>
<p class="mainContent">点击进行动作切换</p>
<script>
$(document).ready(function(){
$(".mainContent").click(function(){
$(".panel").slideToggle("slow");
})
})
</script>
</body>
</html>截图如下所示：
点击随意切换位置，截图如下图所示：
