jQuery 效果 - 滑动 slideDown()与slideUp()与slideToggle()
来源:互联网 发布:javascript 替换对象 编辑:程序博客网 时间:2024/06/06 20:34
jQuery 滑动方法可使元素上下滑动。
jQuery slideDown() 方法用于向下滑动元素。
$(selector).slideDown(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
jQuery slideToggle() 方法
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动,则 slideToggle() 可向上滑动它们。
如果元素向上滑动,则 slideToggle() 可向下滑动它们。
$(selector).slideToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
jQuery slideUp() 方法
jQuery slideUp() 方法用于向上滑动元素。
$(selector).slideUp(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> </head> <script type="text/javascript" src="jquery-1.8.3.js"></script><script type="text/javascript"> $(document).ready(function(){ $(".flip").click(function(){ //jQuery slideDown() 方法用于向下滑动元素。 //slideUp slideToggle$(".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:300px;display:none;}</style></head> <body> <div class="panel"><p>小蜗牛问妈妈:为什么我们从生下来,就要背负这个又硬又重的壳呢?</p> <p> 妈妈:因为我们的身体没有骨23sc.cn骼的支撑,只能爬,又爬不快。所以要这个壳的保护!</p><p> 小蜗牛:毛虫姊姊没有骨头,也爬不快,为什么她却不用背这个又硬又重的壳呢? </p><p> 妈妈:因为毛虫姊姊能变成蝴蝶,23sc.cn天空会保护她啊。 </p><p> 小蜗牛:可是蚯蚓弟弟也没骨头爬不快,也不会变成蝴蝶他什么不背这个又硬又重的壳呢?</p> <p> 妈妈:因为蚯蚓弟弟会钻土, 大地会保护他啊。</p> <p> 小蜗牛哭了起来:我们好可怜,天空不保护,大地也不保护。 </p> <p> 蜗牛妈妈安慰他:所以我们有壳啊!我们不靠天,也不靠地,我们靠自己。 </p></div> <p class="flip">请点击这里</p> </body></html>
转载地址:http://www.w3school.com.cn/jquery/jquery_slide.asp
0 0
- jQuery 效果 - 滑动 slideDown()与slideUp()与slideToggle()
- jQuery 效果 - 滑动slideDown()、slideUp()、slideToggle()
- [jQuery教程]jquery基础教程六(滑动效果函数之slideDown,slideToggle和slideUp)
- [JQ权威指南]SlideDown()与SlideUp()方法实现滑动效果
- jQuery动画效果-slideUp slideDown上下滑动
- 【jQuery】使用slideUp()和slideDown()方法的滑动效果
- JQury中设置元素滑动(slideUp/slideDown/slideToggle)方法
- 遇到jQuery 中的 slideUp ,slideToggle和 slideDown 动画重复执行
- jQuery动画效果(show与hide/toggle/slideUp/slideToggle/fadeIn/fadeTo)
- jQuery动画效果(show与hide/toggle/slideUp/slideToggle/fadeIn/fadeTo)
- 动画效果-slideUp slideDown上下滑动
- JQuery slidedown slideup方法
- Jquery slideUp slideDown slideToggle 上拉 下拉 自动上拉下拉
- 转:遇到jQuery 中的 slideUp ,slideToggle和 slideDown 动画重复执行
- jquery的slideUp,slideDown对table无效果
- jQuery-动画效果animate() slideDown() slideUp() fadeIn() fadeOut()
- 用原生javascript写出jquery中slideUp和slideDown效果
- 用原生javascript写出jquery中slideUp和slideDown效果
- PyQt4设计UI界面并添加简单功能【python+pyqt4+opencv】
- 十进制手动换算成二进制
- 窗口函数 OVER PARTITION BY
- c++ primer plus 第五版 第七章 编程练习 第 8 题 (字符数组转成字符串,trim使用,判断空行)
- Android程序员学PHP开发(3)-循环变量真假非空-PhpStorm
- jQuery 效果 - 滑动 slideDown()与slideUp()与slideToggle()
- 错排问题
- 汉字UTF8编码占用几个字节
- 魔兽世界伯尔瓦公爵黑装备的故事
- 浅谈C++类中的公有和私有
- Java 小知识点
- 17 - 03 - 12 图解HTTP(16)
- Linux下bootargs引导参数说明
- PS封包总结