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 相关文章推荐
newxtree.js代码
Mar 13 Javascript
Javascript模块化编程(一)模块的写法最佳实践
Jan 17 Javascript
ext combobox动态加载数据库数据(附前后台)
Jun 17 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
May 11 Javascript
javascript动态创建链接的方法
May 13 Javascript
js实现左侧网页tab滑动门效果代码
Sep 06 Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 Javascript
微信小程序 animation API详解及实例代码
Oct 08 Javascript
bootstrapValidator 重新启用提交按钮的方法
Feb 20 Javascript
基于BootStrap的前端分页带省略号和上下页效果
May 18 Javascript
angular 服务的单例模式(依赖注入模式下)详解
Oct 22 Javascript
jQuery实现的别踩白块小游戏完整示例
Jan 07 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 5.3.5安装memcache注意事项小结
2011/04/12 PHP
php牛逼的面试题分享
2013/01/18 PHP
具有时效性的php加密解密函数代码
2013/06/19 PHP
PHP判断表单复选框选中状态完整例子
2014/06/24 PHP
PHP中实现获取IP和地理位置类分享
2015/02/10 PHP
示例详解Laravel的注册重构
2016/08/14 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
6个常见的 PHP 安全性攻击实例和阻止方法
2020/12/16 PHP
JQuery 风格的HTML文本转义
2009/07/01 Javascript
javascript 鼠标拖动图标技术
2010/02/07 Javascript
jQuery中queue()方法用法实例
2014/12/29 Javascript
Node.js + Redis Sorted Set实现任务队列
2016/09/19 Javascript
巧用weui.topTips验证数据的实例
2017/04/17 Javascript
JS基于正则表达式的替换操作(replace)用法示例
2017/04/28 Javascript
jQuery实现动态控制页面元素的方法分析
2017/12/20 jQuery
vue-router重定向不刷新问题的解决
2018/06/25 Javascript
jquery获取元素到屏幕四周可视距离的方法
2018/09/05 jQuery
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
2020/08/24 Javascript
对django xadmin自定义菜单的实例详解
2019/01/03 Python
python使用time、datetime返回工作日列表实例代码
2019/05/09 Python
用django-allauth实现第三方登录的示例代码
2019/06/24 Python
Pandas中DataFrame的分组/分割/合并的实现
2019/07/16 Python
解决Tensorboard 不显示计算图graph的问题
2020/02/15 Python
pycharm全局搜索的具体步骤
2020/07/28 Python
python实现文件分片上传的接口自动化
2020/11/19 Python
泰国演唱会订票网站:StubHub泰国
2018/02/26 全球购物
微软中国官方商城:Microsoft Store中国
2018/10/12 全球购物
马来西亚在线购物市场:PGMall.my
2019/10/13 全球购物
网上常见的一份Linux面试题(多项选择部分)
2015/02/07 面试题
工程测量与监理专业应届生求职信
2013/11/27 职场文书
个人简历中的自我评价怎么写
2014/01/26 职场文书
《宋庆龄故居的樟树》教学反思
2014/04/07 职场文书
校车司机安全责任书
2015/05/11 职场文书
Python开发五子棋小游戏
2022/05/02 Python