jQuery 折叠/合并,展开/收缩的层，动画效果

发布时间：2018-11-30 13:27:58 所属栏目：活动来源：站长网

导读：两个折叠、伸展的层，基于 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>
提示：可修改后代码再运行!

（编辑：晋江门户网）

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