jQuery之滑动
2015-09-29 11:59
435 查看
jQuery 滑动方法
通过 jQuery,您可以在元素上创建滑动效果。
jQuery 拥有以下滑动方法:
slideDown()
slideUp()
slideToggle()
jQuery slideDown() 方法
jQuery slideDown() 方法用于向下滑动元素。
语法:$(selector).slideDown(speed,callback);
举个栗子
jQuery slideUp() 方法
jQuery slideUp() 方法用于向上滑动元素。
语法:$(selector).slideUp(speed,callback);
举个栗子
jQuery slideToggle() 方法
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动,则 slideToggle() 可向上滑动它们。
如果元素向上滑动,则 slideToggle() 可向下滑动它们。
语法:$(selector).slideToggle(speed,callback);
举个栗子
通过 jQuery,您可以在元素上创建滑动效果。
jQuery 拥有以下滑动方法:
slideDown()
slideUp()
slideToggle()
jQuery slideDown() 方法
jQuery slideDown() 方法用于向下滑动元素。
语法:$(selector).slideDown(speed,callback);
参数 | 是否可选 | 作用 | 取值 |
speed | 是 | 规定效果的时长 | “slow”、”fast” 或毫秒 |
callback | 是 | 制定滑动完成后所执行的函数 | 滑动完成后所执行的函数名称 |
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideDown("slow"); }); }); </script> <style type="text/css"> div.panel,p.flip { margin:0px; padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; } div.panel { height:120px; display:none; } </style> </head> <body> <div class="panel"> <p>jQuery slideDown() 方法</p> <p>jQuery slideDown() 方法</p> <p>jQuery slideDown() 方法</p> <p>jQuery slideDown() 方法</p> </div> <p class="flip">请点击这里</p> </body> </html>
jQuery slideUp() 方法
jQuery slideUp() 方法用于向上滑动元素。
语法:$(selector).slideUp(speed,callback);
参数 | 是否可选 | 作用 | 取值 |
speed | 是 | 规定效果的时长 | “slow”、”fast” 或毫秒 |
callback | 是 | 制定滑动完成后所执行的函数 | 滑动完成后所执行的函数名称 |
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideUp("slow"); }); }); </script> <style type="text/css"> div.panel,p.flip { margin:0px; padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; } div.panel { height:120px; } </style> </head> <body> <div class="panel"> <p>jQuery slideUp() 方法</p> <p>jQuery slideUp() 方法</p> <p>jQuery slideUp() 方法</p> <p>jQuery slideUp() 方法</p> </div> <p class="flip">请点击这里</p> </body> </html>
jQuery slideToggle() 方法
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动,则 slideToggle() 可向上滑动它们。
如果元素向上滑动,则 slideToggle() 可向下滑动它们。
语法:$(selector).slideToggle(speed,callback);
参数 | 是否可选 | 作用 | 取值 |
speed | 是 | 规定效果的时长 | “slow”、”fast” 或毫秒 |
callback | 是 | 制定滑动完成后所执行的函数 | 滑动完成后所执行的函数名称 |
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideToggle("slow"); }); }); </script> <style type="text/css"> div.panel,p.flip { margin:0px; padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; } div.panel { height:120px; display:none; } </style> </head> <body> <div class="panel"> <p>jQuery slideToggle() 方法</p> <p>jQuery slideToggle() 方法</p> <p>jQuery slideToggle() 方法</p> <p>jQuery slideToggle() 方法</p> </div> <p class="flip">请点击这里</p> </body> </html>
相关文章推荐
- jquery中attr和prop的区别
- jQuery EasyUI使用教程之创建一个拖放的购物车
- jquery checkbox勾选/取消勾选的诡异问题
- 7款jQuery图片轮播滑动插件
- ajax学习
- jQuery.validate验证上传文件大小
- jQuery自定义插件开发基础1——jQuery实用函数的实现
- jqzoom基于jQuery的图片放大镜
- jquery中eq()与get()的区别
- jquery中attr和prop的区别
- Jquery 全选/反选
- Jquery中$.ajax()方法详解【转】
- jquery中attr和prop的区别
- jQuery对象原型构建-学习笔记
- jQuery Mobile 自定义按钮图标
- jQuery中的ajax async同步和异步详解
- 滚动加载(ajax)内容添加事件 && jQuery.on() 函数详解
- jQuery中removeClass()方法用法实例
- jQuery获取动态添加的元素,live和on的区别
- jQuery 中的防冲突(noConflict)机制