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 相关文章推荐
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
Jan 15 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
May 03 Javascript
Javascript 页面模板化很多人没有使用过的方法
Jun 05 Javascript
使用javascipt---实现二分查找法
Apr 10 Javascript
JQUERY对单选框(radio)操作的小例子
Apr 25 Javascript
js获取php变量的实现代码
Aug 10 Javascript
JS对select控件option选项的增删改查示例代码
Oct 21 Javascript
javascript包装对象实例分析
Mar 27 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
Apr 08 Javascript
Javascript打印局部页面实例
Jun 21 Javascript
记录vue项目中遇到的一点小问题
May 14 Javascript
js 判断当前时间是否处于某个一个时间段内
Sep 19 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
DC最新动画电影:《战争之子》为何内容偏激,毁了一个不错的漫画
2020/04/09 欧美动漫
Apache+php+mysql在windows下的安装与配置图解(最新版)
2008/11/30 PHP
PHP数组交集的优化代码分析
2011/03/06 PHP
php 文件缓存函数
2011/10/08 PHP
php无限分类且支持输出树状图的详细介绍
2013/06/19 PHP
PHP简单实现HTTP和HTTPS跨域共享session解决办法
2015/05/27 PHP
php gd等比例缩放压缩图片函数
2016/06/12 PHP
jquery删除数据记录时的弹出提示效果
2014/05/06 Javascript
node.js中的console.info方法使用说明
2014/12/09 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
2015/05/25 Javascript
JS中改变this指向的方法(call和apply、bind)
2016/03/26 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
2017/04/17 Javascript
JavaScript分步实现一个出生日期的正则表达式
2018/03/22 Javascript
详解JavaScript 中 if / if...else...替换方式
2018/07/15 Javascript
layui table设置前台过滤转义等方法
2018/08/17 Javascript
如何使用JavaScript实现栈与队列
2019/06/24 Javascript
vue组件传值的实现方式小结【三种方式】
2020/02/05 Javascript
基于canvasJS在PHP中制作动态图表
2020/05/30 Javascript
Python正则表达式匹配ip地址实例
2014/10/09 Python
在Python的Django框架中使用通用视图的方法
2015/07/21 Python
Python中selenium实现文件上传所有方法整理总结
2017/04/01 Python
python实现对象列表根据某个属性排序的方法详解
2019/06/11 Python
Pandas之Dropna滤除缺失数据的实现方法
2019/06/25 Python
如何修复使用 Python ORM 工具 SQLAlchemy 时的常见陷阱
2019/11/19 Python
关于Pytorch的MLP模块实现方式
2020/01/07 Python
Django URL参数Template反向解析
2020/11/24 Python
css3 实现圆形旋转倒计时
2018/02/24 HTML / CSS
HTML table 表格边框的实现思路
2019/10/12 HTML / CSS
阿提哈德航空官方网站:Etihad Airways
2017/01/06 全球购物
遇到的Mysql的面试题
2014/06/29 面试题
代码中finally中的代码会不会执行
2012/02/06 面试题
物业管理求职自荐信
2013/09/25 职场文书
会计学财务管理专业个人的自我评价
2013/10/19 职场文书
运动会宣传口号
2014/06/09 职场文书
新员工试用期工作总结2015
2015/05/28 职场文书
Python 发送SMTP邮件的简单教程
2021/06/24 Python