jQuery 折叠/归并,睁开/紧缩的层，动画结果

发布时间：2018-08-20 15:26:27 所属栏目：活动来源：站长网

导读：两个折叠、舒展的层，基于 jQuery 框架实现，有简朴、滑腻的动画结果，实现要领如下： 1,起首把JQ导入. 2,然后开始写函数了。$(document).ready(function(){}); 3,前面说过了，获取标签能直接 $(标签)。给标签注册 onclick变乱直接可以 click. 4,焦点代码:

　　两个折叠、舒展的层，基于jQuery框架实现，有简朴、滑腻的动画结果，实现要领如下：

　　1,起首把JQ导入.

　　2,然后开始写函数了。$(document).ready(function(){});

　　3,前面说过了，获取标签能直接 $("标签")。给标签注册 onclick变乱直接可以 click.

　　4,焦点代码:

　　$("head").click(function(){$("content").slideToggle("slow");});

　　5,slideToggle(speed, callback)

　　通过高度变革劳迫椿全部匹配元素的可见性，并在切换完成后可选地触发一个回调函数。

　　这个动画结果只调解元素的高度，可以使匹配的元素以“滑动”的方法潜匿或表现。

　　参数：

　　speed (String|Number): (可选) 三种预定速率之一的字符串("slow", "normal", or "fast")或暗示动画时长的毫秒数值(如：1000)

　　callback (Function): (可选) 在动画完成时执行的函数

　　为办理一些网页殊效运行后不能表现结果（譬喻：jQuery则必要革新）题目，猛火出格新增网页版演示。

　　点击查察：网页殊效

　　运行演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery 可伸缩的模块、层结果 - Liehuo.Net</title> <script type="text/javascript" src="/uploads/common/js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#head").click(function(){ $("#content").slideToggle("slow"); }); $("#head1").click(function(){ $("#content1").slideToggle("slow"); }); }); </script> <style type="text/css"> p,div{margin:0;padding:0;} /*配置p,div之间的间距*/ #head{width:280px;background:#ddd;height:20px;border-top:1px solid #aaa;border-right:1px solid #aaa;border-left:1px solid #aaa;} #content{width:280px;background:#adf;height:350px;border-left:1px solid #aaa;border-right:1px solid #aaa;border-bottom:1px solid #aaa;margin-top:0px;} #head1{width:280px;background:#ddd;height:20px;border-top:1px solid #aaa;border-right:1px solid #aaa;border-left:1px solid #aaa;} #content1{width:280px;background:#adf;height:350px;border-left:1px solid #aaa;border-right:1px solid #aaa;border-bottom:1px solid #aaa;margin-top:0px;} </style> </head> <body> <table> <tr> <td> <p id="head">单击这里测试</p> <div id="content"> 1,起首把jQuery导入. 2,然后开始写函数了。$(document).ready(function(){}); 3,前面说过了，获取标签能直接 $("标签")。给标签注册 onclick变乱直接可以 click. 4,焦点代码: $("head").click(function(){$("content").slideToggle("slow");}); 5,slideToggle(speed, callback) 通过高度变革劳迫椿全部匹配元素的可见性，并在切换完成后可选地触发一个回调函数。这个动画结果只调解元素的高度，可以使匹配的元素以“滑动”的方法潜匿或表现。返回值 jQuery 参数 speed (String|Number): (可选) 三种预定速率之一的字符串("slow", "normal", or "fast")或暗示动画时长的毫秒数值(如：1000) callback (Function): (可选) 在动画完成时执行的函数 </div> </td> <td> <p id="head1">单击这里测试(liehuo.net)</p> <div id="content1"> VB小型的数据库报表措施，然则天生Word,Excel,Html名目报表 </div> </td> </tr> </table> </body> </html><br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!