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 18 Javascript
javaScript checkbox 全选/反选及批量删除
Apr 28 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
Jan 04 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
Jan 17 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
Jan 14 Javascript
详解JavaScript中数组的相关知识
Jul 29 Javascript
详述JavaScript实现继承的几种方式(推荐)
Mar 22 Javascript
辨析JavaScript中的Undefined类型与null类型
May 26 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
Jun 10 Javascript
JS实现获取当前URL和来源URL的方法
Aug 24 Javascript
vue实现页面加载动画效果
Sep 19 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
Apr 09 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
国王的咖啡这么大来头,名字的由来是什么
2021/03/03 咖啡文化
PHP冒泡排序算法代码详细解读
2011/07/17 PHP
linux下为php添加curl扩展的方法
2011/07/29 PHP
PHP无限极分类函数的实现方法详解
2017/04/15 PHP
40款非常棒的jQuery 插件和制作教程(系列一)
2011/10/26 Javascript
jQuery EasyUI API 中文文档 - PropertyGrid属性表格
2011/11/18 Javascript
基于jquery tab切换(防止页面刷新)
2012/05/23 Javascript
jquery选择器原理介绍($()使用方法)
2014/03/25 Javascript
javascript学习笔记(八)正则表达式
2014/10/08 Javascript
Javscript调用iframe框架页面中函数的方法
2014/11/01 Javascript
Node.js实现的简易网页抓取功能示例
2014/12/05 Javascript
JavaScript实现带标题的图片轮播特效
2015/05/20 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
2015/06/05 Javascript
JS修改地址栏参数实例代码
2016/06/14 Javascript
AngularJS通过$location获取及改变当前页面的URL
2016/09/23 Javascript
十大热门的JavaScript框架和库
2017/03/21 Javascript
VUE2.0中Jsonp的使用方法
2018/05/22 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
Element Breadcrumb 面包屑的使用方法
2020/07/26 Javascript
[01:48:04]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第一场 2月7日
2021/03/11 DOTA
python基础教程之五种数据类型详解
2017/01/12 Python
Python爬虫实例_利用百度地图API批量获取城市所有的POI点
2018/01/10 Python
Python爬虫之网页图片抓取的方法
2018/07/16 Python
Pyinstaller打包.py生成.exe的方法和报错总结
2019/04/02 Python
mac系统下Redis安装和使用步骤详解
2019/07/09 Python
Pytorch实现各种2d卷积示例
2019/12/30 Python
python yield和Generator函数用法详解
2020/02/10 Python
Python计算信息熵实例
2020/06/18 Python
用ldap作为django后端用户登录验证的实现
2020/12/07 Python
weblogic面试题
2016/03/07 面试题
用JAVA实现一种排序,JAVA类实现序列化的方法(二种)
2014/04/23 面试题
地球物理学专业推荐信
2014/09/08 职场文书
2014年派出所工作总结
2014/11/21 职场文书
2015年高三年级组工作总结
2015/07/21 职场文书
2019年销售部季度工作计划3篇
2019/10/09 职场文书
MyBatis-Plus 批量插入数据的操作方法
2021/09/25 Java/Android