收缩展开效果
2012-08-25 23:02
211 查看
演示
收缩展开效果
// // 收缩展开效果
$(document).ready(function(){
$(".box h1").toggle(function(){
$(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");
},function(){
$(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");
});
});
// ]]>
2
3
4
5
2
代码
收缩展开效果
// // 收缩展开效果
$(document).ready(function(){
$(".box h1").toggle(function(){
$(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");
},function(){
$(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");
});
});
// ]]>
收缩展开效果
12
3
4
5
收缩展开效果
12
代码
<!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> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>收缩展开效果</title> <script type="text/javascript" src="common/jquery-1.2.6.min.js"></script> <link type="text/css" rel="stylesheet" href="common/common.css" /> <style> /* 收缩展开效果 */ .text{line-height:22px;padding:0 6px;color:#666;} .box h1{padding-left:10px;height:22px;line-height:22px;background:#f1f1f1;font-weight:bold;} .box{position:relative;border:1px solid #e7e7e7;} </style> </head> <body> <script type="text/javascript"> // 收缩展开效果 $(document).ready(function(){ $(".box h1").toggle(function(){ $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow"); },function(){ $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow"); }); }); </script> <!-- 收缩展开效果 --> <div class="box"> <h1>收缩展开效果</h1> <div class="text"> 1<br /> 2<br /> 3<br /> 4<br /> 5<br /> </div> </div> <br /> <div class="box"> <h1>收缩展开效果</h1> <div class="text"> 1<br /> 2<br /> </div> </div> </body> </html>
相关文章推荐
- 菜单收缩展开效果(IE6/FF2)
- vuejs实现折叠面板展开收缩动画效果
- EL表达式的param用法与二级分类展开收缩效果
- js如何实现目录树形展开收缩效果(2)
- js实现的侧边栏展开收缩效果
- html页面内容的收缩和展开效果
- jquery学习第二天:超链接title提示效果、图片放大提示效果、内容展开收缩动画效果
- 【每天一个JQuery特效】以卷帘效果展开或收缩被选择的元素(2)
- jquery简易收缩展开效果特效
- js如何实现目录树形展开收缩效果(1)
- 文本区块收缩展开效果
- 带缓冲的 收缩与展开内容效果
- QQ列表的收缩展开,带动画效果
- jquery简易收缩展开效果特效
- jquery简易收缩展开效果特效
- 仿豆果美食tableview的展开和收缩效果
- 标题收缩展开效果
- jquery简单实现网页层的展开与收缩效果
- js 点击展开和收缩效果
- JS收缩展开效果