Jq的SlideDown和SlideToggle

Jq的SlideDown和SlideToggle

效果图：

HTML：

先创建一个div，类名为content，在大的div里创建两个小的div分别给这两个小的div命名为ping和bing，在bing里给它绑定id值为；
在创建一个大的div命名为divBtn，在创建两个按钮，在分别给它们绑定一id值，按钮样式是layUI的；
css：
给content设置一个20px的水平居中，在给它设置高度为800px，宽度为400px。在设置为实线，
在设置外边距为20px;分别给两个盒子都设置高度和宽度为380px，和360px，在给它一个背景颜色为蓝色，设置在左边，在将元素隐藏，在给divBtn设置文字水平居中的效果，给button设置外边距为8px，给它一个颜色背景，在给按钮圆角设置4px，字体大小为16px，颜色设置为白色，
Jq：

jQuery中的slideDown通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000);
fn:在动画完成时执行的函数，每个元素执行一次。
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear";
（3000）指的是执行动画时间3000s,
JQ中的slideToggle;

slideDown与slideUp是一对相反的方法。需要对元素进行上下拉卷效果的切换，jQuery提供了一个便捷方法slideToggle用滑动动画显示或隐藏一个匹配元素，用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件, 如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
参考说明：
speed: 隐藏/显示 效果的速度。默认是 “0"毫秒。可能的值：slow，normal，fast。”
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。