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 相关文章推荐
jquery多浏览器捕捉回车事件代码
Jun 22 Javascript
Jquery中children与find之间的区别详细解析
Nov 29 Javascript
JS获取浏览器语言动态加载JS文件示例代码
Oct 31 Javascript
提升PHP安全:8个必须修改的PHP默认配置
Nov 17 Javascript
javascript深拷贝和浅拷贝详解
Feb 14 Javascript
Cookies 和 Session的详解及区别
Apr 21 Javascript
用node和express连接mysql实现登录注册的实现代码
Jul 05 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
实现div内部滚动条滚动到底部和顶部的代码
Nov 15 Javascript
解决vue v-for 遍历循环时key值报错的问题
Sep 06 Javascript
详解Vue之计算属性
Jun 20 Javascript
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
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调用C代码的实现方法
2014/03/11 PHP
PHP制作百度词典查词采集器
2015/01/29 PHP
8个必备的PHP功能开发
2015/10/02 PHP
php数值计算num类简单操作示例
2020/05/15 PHP
在线游戏大家来找茬II
2006/09/30 Javascript
JavaScript 字符串处理函数使用小结
2010/12/02 Javascript
javascript 实现简单的table排序及table操作练习
2012/12/28 Javascript
jquery ztree实现下拉树形框使用到了json数据
2014/05/14 Javascript
前端轻量级MVC框架CanJS详解
2014/09/26 Javascript
JS常用函数使用指南
2014/11/23 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
2015/03/24 Javascript
第八篇Bootstrap下拉菜单实例代码
2016/06/21 Javascript
基于javascript实现最简单选项卡切换
2017/02/01 Javascript
微信小程序自定义导航隐藏和显示功能
2017/06/13 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
2019/11/14 Javascript
简单了解JavaScript sort方法
2019/11/25 Javascript
完美解决Pycharm无法导入包的问题 Unresolved reference
2018/05/18 Python
Python二进制文件读取并转换为浮点数详解
2019/06/25 Python
python修改FTP服务器上的文件名
2019/09/11 Python
TensorFlow keras卷积神经网络 添加L2正则化方式
2020/05/22 Python
Python如何优雅删除字符列表空字符及None元素
2020/06/25 Python
如何通过python实现IOU计算代码实例
2020/11/02 Python
python实现KNN近邻算法
2020/12/30 Python
CSS3支持IE6, 7, and 8的边框border属性
2012/12/28 HTML / CSS
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
网易微博Web App用HTML5开发的过程介绍
2012/06/13 HTML / CSS
用html5的canvas和JavaScript创建一个绘图程序的简单实例
2016/07/06 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
2020/09/15 HTML / CSS
口腔医学技术应届生求职信
2013/11/09 职场文书
美术毕业生求职信
2014/02/25 职场文书
旅行社优秀创业计划书
2014/08/16 职场文书
大学生志愿者心得体会
2016/01/15 职场文书
《自己去吧》教学反思
2016/02/16 职场文书
Python自动化测试PO模型封装过程详解
2021/06/22 Python
MongoDB误操作后使用oplog恢复数据
2022/04/11 MongoDB
解决springboot druid数据库连接失败后一直重连的方法
2022/04/19 Java/Android