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:在动画完成时执行的函数,每个元素执行一次。