本节我们学习 jQuery 中的滑动,我们可以通过 slideDown()、slideUp()、slideToggle() 方法来实现元素的滑动效果。
slideDown()方法
slideDown() 方法用于实现元素向下滑动效果。如果元素已隐藏,则显示被选元素。
语法如下:
$(selector).slideDown(speed,callback);
参数 speed 用于规定效果的时长,可选值有 slow、fast、毫秒。参数 callback 是滑动完成后所执行的函数名称。
示例:
- Python同学计划
- PHP常见安全及错误处理
- JavaScript基础知识梳理
- Node.js简明入门
- Python由浅入深入门
上述代码中,我们可以通过设置 slideDown() 方法所带的参数,来控制指定元素的下滑所用时长。
slideUp()方法
slideUp() 方法用于实现元素向上滑动效果。如果元素已显示,则隐藏被选元素。
语法如下:
$(selector).slideUp(speed,callback);
示例:
slideUp() 的功能其实和 slideDown() 方法刚好相呼应,我们来看一下:
- Python同学计划
- PHP常见安全及错误处理
- JavaScript基础知识梳理
- Node.js简明入门
- Python由浅入深入门
在浏览器中的演示效果:
slideToggle()方法
slideToggle() 方法通过使用滑动效果来切换元素的可见状态。如果被选元素是可见的,则隐藏这些元素,如果被选元素是隐藏的,则显示这些元素。相当于在 slidedown() 和 slideup() 方法之间切换。
语法如下:
$(selector).slideToggle(speed,callback);
示例:
通过 slideToggle() 方法使用滑动效果来切换列表的可见状态:
$(function(){
$(".down").click(function(){
$(".course").slideToggle(1000);
});
});
在浏览器中的演示效果: