小白教程
所有教程
关于
Search
172.70.100.62
172.70.100.62
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“JQuery 效果 – 滑动”的源代码
本页内容
上一节:
JQuery_效果_–_淡入淡出
下一节:
JQuery_效果_–_动画
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:jQuery 滑动}}[[Category:jQuery 教程|9]] = jQuery 效果 - 滑动 = jQuery 滑动方法可使元素上下滑动。 点击这里,隐藏/显示面板 一寸光阴一寸金,因此,我们为您提供快捷易懂的学习内容。 在这里,您可以通过一种易懂的便利的模式获得您需要的任何知识。 [[try.php?filename=tryjquery_slide_down|jQuery slideDown()]] 演示 jQuery slideDown() 方法。 [[try.php?filename=tryjquery_slide_up|jQuery slideUp()]] 演示 jQuery slideUp() 方法。 [[try.php?filename=tryjquery_slide_toggle|jQuery slideToggle()]] 演示 jQuery slideToggle() 方法。 == jQuery 滑动方法 == 通过 jQuery,您可以在元素上创建滑动效果。 jQuery 拥有以下滑动方法: * slideDown() * slideUp() * slideToggle() == jQuery slideDown() 方法 == jQuery slideDown() 方法用于向下滑动元素。 '''语法:''' $(selector).slideDown(speed,callback); 可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。 可选的 callback 参数是滑动完成后所执行的函数名称。 下面的例子演示了 slideDown() 方法: <sample title="" desc="" lang="html" hererun="1"> $("#flip").click(function(){ $("#panel").slideDown(); }); </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideDown("slow"); }); }); </script> <style type="text/css"> #panel,#flip { padding:5px; text-align:center; background-color:#e5eecc; border:solid 1px #c3c3c3; } #panel { padding:50px; display:none; } </style> </head> <body> <div id="flip">点我滑下面板</div> <div id="panel">Hello world!</div> </body> </html> </run> == jQuery slideUp() 方法 == jQuery slideUp() 方法用于向上滑动元素。 '''语法:''' $(selector).slideUp(speed,callback); 可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。 可选的 callback 参数是滑动完成后所执行的函数名称。 下面的例子演示了 slideUp() 方法: <sample title="" desc="" lang="html" hererun="1"> $("#flip").click(function(){ $("#panel").slideUp(); }); </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideUp("slow"); }); }); </script> <style type="text/css"> #panel,#flip { padding:5px; text-align:center; background-color:#e5eecc; border:solid 1px #c3c3c3; } #panel { padding:50px; } </style> </head> <body> <div id="flip">点我拉起面板</div> <div id="panel">Hello world!</div> </body> </html> </run> == jQuery slideToggle() 方法 == jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。 如果元素向下滑动,则 slideToggle() 可向上滑动它们。 如果元素向上滑动,则 slideToggle() 可向下滑动它们。 $(selector).slideToggle(speed,callback); 可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。 可选的 callback 参数是滑动完成后所执行的函数名称。 下面的例子演示了 slideToggle() 方法: <sample title="" desc="" lang="html" hererun="1"> $("#flip").click(function(){ $("#panel").slideToggle(); }); </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideToggle("slow"); }); }); </script> <style type="text/css"> #panel,#flip { padding:5px; text-align:center; background-color:#e5eecc; border:solid 1px #c3c3c3; } #panel { padding:50px; display:none; } </style> </head> <body> <div id="flip">点我,显示或隐藏面板。</div> <div id="panel">Hello world!</div> </body> </html> </run>
返回至“
JQuery 效果 – 滑动
”。
上一节:
JQuery_效果_–_淡入淡出
下一节:
JQuery_效果_–_动画