携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第26天，点击查看活动详情
认识一下，slideUp 和 slideDown
slideUp 方法能以滑动方式隐藏被选元素，动画效果很像元素往上卷。隐藏后的元素不会显示出来。如果我们想要隐藏的元素显示出来，那就要用到 slideDown 方法了，它能把隐藏的元素下拉出来。
其语法格式为：
// 上卷
$().slideUp(speed, easing, callback);
// 下拉
$().slideDown(speed, easing, callback);
speed可选参数，用于设置显示的速度，其值可以是以毫秒为单位的数值，也可以是 slow、fast 等值。easing可选参数，用于设置动画在不同点上元素的速度，其默认值是swing，表示开头和结尾的速度慢，中间的速度快。callback可选参数，是方法执行完成后，执行的一个函数。
实验测试
我们新建一个index.html
body部分我们实验一个p标签，里面输入一段内容，然后添加两个button，并且定义id
然后在js里面，贤获取道slideup和slidedown的位置，然后通过.click调用上卷下拉函数
- 在上面代码中，页面上会显示一行文字，两个按钮各自绑定了一个点击事件，点击上卷按钮，
p元素会上移，直到被隐藏。 - 点击下拉按钮，
p元素会慢慢下移，直到完全显示到页面上。
什么是 slideToggle 方法
slideToggle 方法是用来切换元素的上卷和下拉效果的。
其语法格式为：
$().slideToggle(speed, function);
speed 表示动画的速度，它是一个可选参数，如果不写就表示没有动画。speed 参数的值可以是单位为毫秒的数值，也可以是字符串，如下所示。
fast表示 200 毫秒。normal表示 400 毫秒。slow表示 600 毫秒。
function 表示动画执行完成后的执行的一个函数，它也是一个可选参数。
测试
我们同样新建文件，本次body部分我们使用一个标题和一个p标签，在js部分，获取标题点击标题调用函数。 下内容。
.....
<script>
$(function () {
$("h3").click(function () {
$("p").slideToggle();
});
});
</script>
</head>
<body>
<h3>slidetoggle</h3>
<p>test。</p>
</body>
</html>
总结
slideUp:通过高度变化（向上减小）来动态地隐藏所有匹配的元素
slideDown:通过高度变化（向下增大）来动态地显示所有匹配的元素
toggle:用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件
对于写的页面主页，如果有菜单的下拉上卷，我们同样可以使用这个方法
比如：
而且我们可以把触发条件进行变换，比如变成鼠标悬停触发。
