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工具函数代码
Feb 17 Javascript
转换字符串为json对象的方法详解
Nov 29 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
Jul 24 Javascript
Bootstrap实现导航栏的2种方式
Nov 28 Javascript
AngularJS的Filter的示例详解
Mar 07 Javascript
js实现显示手机号码效果
Mar 09 Javascript
vue中v-model动态生成的实例详解
Oct 27 Javascript
vue插件实现v-model功能
Sep 10 Javascript
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
Vue初始化中的选项合并之initInternalComponent详解
Jun 11 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
Aug 10 Javascript
微信小程序用户登录和登录态维护的实现
Dec 10 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
浅析PHP程序防止ddos,dns,集群服务器攻击的解决办法
2013/06/18 PHP
PHP实现HTTP断点续传的方法
2015/06/17 PHP
基于php中echo用逗号和用点号的区别详解
2018/01/23 PHP
php实现简易计算器
2020/08/28 PHP
js获得当前时区夏令时发生和终止的时间代码
2014/02/23 Javascript
nodejs npm包管理的配置方法及常用命令介绍
2014/06/05 NodeJs
js实现a标签超链接提交form表单的方法
2015/06/24 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
2016/07/05 Javascript
微信小程序  网络请求API详解
2016/10/25 Javascript
浅谈jquery选择器 :first与:first-child的区别
2016/11/20 Javascript
JS回调函数基本定义与用法实例分析
2017/05/24 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
2017/07/17 Javascript
JavaScript实现的斑马线表格效果【隔行变色】
2017/09/18 Javascript
百度小程序自定义通用toast组件
2019/07/17 Javascript
这应该是最详细的响应式系统讲解了
2019/07/22 Javascript
用Nodejs实现在终端中炒股的实现
2020/10/18 NodeJs
修改NPM全局模式的默认安装路径的方法
2020/12/15 Javascript
python操作xml文件详细介绍
2014/06/09 Python
Python里隐藏的“禅”
2014/06/16 Python
linux下python抓屏实现方法
2015/05/22 Python
python paramiko利用sftp上传目录到远程的实例
2019/01/03 Python
Django的性能优化实现解析
2019/07/30 Python
pycharm 安装JPype的教程
2019/08/08 Python
python 普通克里金(Kriging)法的实现
2019/12/19 Python
Python捕获异常堆栈信息的几种方法(小结)
2020/05/18 Python
Python通过len函数返回对象长度
2020/10/22 Python
美国女性服饰销售网站:Nasty Gal(坏女孩)
2016/07/26 全球购物
德国药房apodiscounter中文官网:德国排名前三的网上药店
2019/06/03 全球购物
WEB控件及HTML服务端控件能否调用客户端方法?如果能,请解释如何调用?
2015/08/25 面试题
会计专业大学生求职信范文
2014/01/28 职场文书
党的群众路线教育实践活动个人整改落实情况汇报
2014/10/28 职场文书
师德标兵事迹材料
2014/12/19 职场文书
2015年国税春训心得体会
2015/03/09 职场文书
家长会后的感想
2015/08/11 职场文书
日本动漫十大公认神作:第五现已全网禁播,《死亡笔记》在榜
2022/03/18 日漫
Python基本知识点总结
2022/04/07 Python