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中关于String对象的replace使用详解
May 24 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
May 23 Javascript
js实现单行文本向上滚动效果实例代码
Nov 28 Javascript
js实现图片拖动改变顺序附图
May 13 Javascript
js实现仿百度瀑布流的方法
Feb 05 Javascript
Jquery中request和request.form和request.querystring的区别
Nov 26 Javascript
使用jQuery UI库开发Web界面的简单入门指引
Apr 22 Javascript
jQuery 判断是否包含在数组中Array[]的方法
Aug 03 Javascript
AngularJS select设置默认值的实现方法
Aug 25 Javascript
浅谈ECMAScript 中的Array类型
Jun 10 Javascript
JS Ajax请求会话过期处理问题解决方法分析
Nov 16 Javascript
jQuery 添加元素和删除元素的方法
Jul 15 jQuery
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
php更改目录及子目录下所有的文件后缀的代码
2010/09/24 PHP
PHP数组对比函数,存在交集则返回真,否则返回假
2011/02/03 PHP
php的XML文件解释类应用实例
2014/09/22 PHP
详解ThinkPHP3.2.3验证码显示、刷新、校验
2016/12/29 PHP
jQuery 使用手册(四)
2009/09/23 Javascript
浅析jQuery1.8的几个小变化
2013/12/10 Javascript
自己使用js/jquery写的一个定制对话框控件
2014/05/02 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
2014/06/16 Javascript
jQuery打印图片pdf、txt示例代码
2014/07/22 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
2016/05/24 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
2017/04/10 Javascript
xmlplus组件设计系列之图标(ICON)(1)
2017/05/05 Javascript
详解从新建vue项目到引入组件Element的方法
2017/08/29 Javascript
layer.open 获取不到表单信息的解决方法
2019/09/26 Javascript
vue-cli 为项目设置别名的方法
2019/10/15 Javascript
js异步接口并发数量控制的方法示例
2020/11/22 Javascript
原生js中运算符及流程控制示例详解
2021/01/05 Javascript
python解决字典中的值是列表问题的方法
2013/03/04 Python
Python实现将n个点均匀地分布在球面上的方法
2015/03/12 Python
Python统计日志中每个IP出现次数的方法
2015/07/06 Python
Python实现的计算马氏距离算法示例
2018/04/03 Python
Scrapy框架使用的基本知识
2018/10/21 Python
Python自定义一个类实现字典dict功能的方法
2019/01/19 Python
Python3 pip3 list 出现 DEPRECATION 警告的解决方法
2019/02/16 Python
django实现将修改好的新模型写入数据库
2020/03/31 Python
H5最强接口之canvas实现动态图形功能
2019/05/31 HTML / CSS
Timberland美国官网:全球领先的户外品牌
2016/08/15 全球购物
美国户外运动商店:Sun & Ski
2018/08/23 全球购物
世界各地的旅游、观光和活动:Isango!
2019/10/29 全球购物
合作与交流自我评价
2015/03/09 职场文书
内勤岗位职责范本
2015/04/13 职场文书
售后服务质量承诺书
2015/04/29 职场文书
歌咏比赛口号大全
2015/12/25 职场文书
创业计划书之面包店
2019/09/12 职场文书
Opencv实现二维直方图的计算及绘制
2021/07/21 Python
微软Win11有哪些隐藏功能? windows11多个功能汇总
2021/11/21 数码科技