jQuery之滑动
来源:互联网 发布:软件测试佩腾 编辑:程序博客网 时间:2024/06/07 16:37
jQuery 滑动方法
通过 jQuery,您可以在元素上创建滑动效果。
jQuery 拥有以下滑动方法:
- slideDown()
- slideUp()
- slideToggle()
jQuery slideDown() 方法
jQuery slideDown() 方法用于向下滑动元素。
语法:$(selector).slideDown(speed,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);
举个栗子
<!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);
举个栗子
<!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>
0 0
- jQuery效果之滑动
- jQuery学习之滑动
- jQuery之滑动
- jQuery效果之滑动面板
- jQuery练手之滑动出现效果
- jquery滑动
- jquery 滑动
- jquery滑动
- jquery滑动
- jQuery 滑动
- Jquery学习之旅之Jquey滑动实现手风琴效果
- JQuery 效果之隐藏与显示、淡入淡出、滑动、回调
- JQuery学习笔记之滑动显示和隐藏
- jQuery效果之隐藏与显示、淡入淡出、滑动、回调
- jQuery -- touch事件之滑动判断(左右上下方向)
- jQuery -- touch事件之滑动判断(左右上下方向)
- [jQuery教程]jquery基础教程六(滑动效果函数之slideDown,slideToggle和slideUp)
- JQuery-图片滑动
- Web前端持续集成方案(三)
- iOS 9适配技巧(更新版)
- python打开自已配置的firefox
- mysql 的thread pool
- Android基础入门教程——2.5.2 Notification(状态栏通知)详解
- jQuery之滑动
- Android绘图机制(四)自定义控件
- HTTP返回码总结
- jQuery中click和onclick的区别
- Leetcode#8 String to Integer (atoi) $corner case
- 虚拟存储子系统调整
- js的事件代理和事件冒泡
- 黑马程序员—字节流+字符流缓冲区(装饰设计)+转换流+IO流操作规律+异常日志+系统信息列表输出
- 常用位操作小技巧