js渐变显示渐变消失示例代码


Posted in Javascript onAugust 01, 2013

以下是渐变的js代码(表示多余三行的要隐藏,点击"more"显示剩下的,点击“less”要逐渐隐藏):

function showAccomplishmentTableRow(){ 
$("#accomplishmenttable tr:hidden").first().show(2000,function(){ 
showAccomplishmentTableRow(); 
}); 
if($("#accomplishmenttable tr:hidden").size()==0){ 
$("#accomplishmenttable").next().attr("onclick","hideAccomplishmentTableRow()").text("Less"); 
} 
} 
function hideAccomplishmentTableRow(){ 
if($("#accomplishmenttable tr:visible").size()<=3){ 
$("#accomplishmenttable").next().attr("onclick","showAccomplishmentTableRow()").text("More"); 
return; 
} $("#accomplishmenttable tr:visible").last().hide(2000,function(){ 
hideAccomplishmentTableRow(); 
}); 
}

html
<table id="accomplishmenttable" class="bgWhite border3PGreye7e7e7 marginT20 roundedCorner width100P"> 
<tbody> 
<tr class="bgLightGreyf5f5f5 height40"> 
<th class="border_bottom3Pgreye7e7e7 border_right1Pgreye7e7e7 border_top1PWhite fontGreyGeneral textCenter roundedCorner_TL verticalMiddle width30P" colspan="2">MY ACCOMPLISHMENTS</th> 
</tr> <tr class="bgWhite height40"> 
<td class="border_bottom1Pgreye7e7e7 border_right1Pgreye7e7e7 fontGreyGeneral p14Font width20P"> 
<div class="margin5">border_bottom1Pgreye7e7e7</div> 
</td> 
<td class="border_bottom1Pgreye7e7e7 border_right1Pgreye7e7e7 fontGreyGeneral p14Font textLeft width80P"> 
border_bottom1Pgreye7e7e7 
</td> 
</tr> 
<tr class="bgWhite height40"> 
<td class="border_bottom1Pgreye7e7e7 border_right1Pgreye7e7e7 fontGreyGeneral p14Font width20P"> 
<div class="margin5">border_bottom1Pgreye7e7e7</div> 
</td> 
<td class="border_bottom1Pgreye7e7e7 border_right1Pgreye7e7e7 fontGreyGeneral p14Font textLeft width80P"> 
border_bottom1Pgreye7e7e7 
</td> 
</tr> 
</tbody> 
</table> 
<div class="floatR marginT5 p14Font textLink" onclick="showAccomplishmentTableRow();">More</div>
Javascript 相关文章推荐
js操作时间(年-月-日 时-分-秒 星期几)
Jun 20 Javascript
dojo随手记 gird组件引用
Feb 24 Javascript
用jquery写的一个万年历(自写)
Jan 20 Javascript
干货分享:让你分分钟学会javascript闭包
Dec 25 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
Apr 20 Javascript
angular.js之路由的选择方法
Sep 24 Javascript
AngularJs基于角色的前端访问控制的实现
Nov 07 Javascript
微信小程序实现城市列表选择
Jun 05 Javascript
vue+springmvc导出excel数据的实现代码
Jun 27 Javascript
LayUI表格批量删除方法
Aug 15 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
Sep 25 Javascript
利用JavaScript将Excel转换为JSON示例代码
Jun 14 Javascript
jQuery点击弹出下拉菜单的小例子
Aug 01 #Javascript
JS调用CS里的带参方法实例
Aug 01 #Javascript
js中方法重载如何实现?以及函数的参数问题
Aug 01 #Javascript
子窗体与父窗体传值示例js代码
Aug 01 #Javascript
根据选择不同的下拉值出现相对应的文本输入框
Aug 01 #Javascript
jquery图片放大功能简单实现
Aug 01 #Javascript
基于jquery的文章中所有图片width大小批量设置方法
Aug 01 #Javascript
You might like
PHP4 与 MySQL 交互使用
2006/10/09 PHP
PHP正则表达式之定界符和原子介绍
2012/10/05 PHP
Laravel框架学习笔记(二)项目实战之模型(Models)
2014/10/15 PHP
php禁用函数设置及查看方法详解
2016/07/25 PHP
正负小数点后两位浮点数实现原理及代码
2013/09/06 Javascript
JQuery插件开发示例代码
2013/11/06 Javascript
js实现全国省份城市级联下拉菜单效果代码
2015/09/07 Javascript
JQuery validate插件验证用户注册信息
2016/05/11 Javascript
JavaScript获取键盘按键的键码(参照表)
2017/01/10 Javascript
js中setTimeout的妙用--防止循环超时
2017/03/06 Javascript
js实现网页同时进行多个倒计时功能
2019/02/25 Javascript
Three.js中矩阵和向量的使用教程
2019/03/19 Javascript
Node.js操作MongoDB数据库实例分析
2020/01/19 Javascript
JavaScript实现tab栏切换效果
2020/03/16 Javascript
vue使用echarts画组织结构图
2021/02/06 Vue.js
Python中getpass模块无回显输入源码解析
2018/01/11 Python
python射线法判断检测点是否位于区域外接矩形内
2019/06/28 Python
Python使用__new__()方法为对象分配内存及返回对象的引用示例
2019/09/20 Python
python实现银行管理系统
2019/10/25 Python
np.random.seed() 的使用详解
2020/01/14 Python
详解CSS3的opacity属性设置透明效果的用法
2016/05/09 HTML / CSS
纯CSS3制作页面切换效果的实例代码
2019/05/30 HTML / CSS
运动服饰每月订阅盒:Ellie
2018/04/29 全球购物
英国最大最好的无人机商店:Drones Direct
2019/07/12 全球购物
工作违纪检讨书
2014/02/17 职场文书
企业环保标语
2014/06/10 职场文书
经营理念口号
2014/06/21 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
2014小学二年级班主任工作总结
2014/12/05 职场文书
期中考试复习计划
2015/01/19 职场文书
介绍信范文
2015/01/31 职场文书
手术室消毒隔离制度
2015/08/05 职场文书
2016年五一促销广告语
2016/01/28 职场文书
为什么MySQL 删除表数据 磁盘空间还一直被占用
2021/10/16 MySQL
vue使用wavesurfer.js解决音频可视化播放问题
2022/04/04 Vue.js
vue如何清除浏览器历史栈
2022/05/25 Vue.js