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 选择器、DOM操作、事件、动画
Nov 25 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
Oct 15 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
Apr 04 Javascript
Angular2 (RC4) 路由与导航详解
Sep 21 Javascript
微信开发 微信授权详解
Oct 21 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
Feb 28 Javascript
Javascript中click与blur事件的顺序详析
Apr 25 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
Dec 26 Javascript
详解webpack4.x之搭建前端开发环境
Mar 28 Javascript
实例详解带参数的 npm script
May 28 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
vuex管理状态仓库使用详解
Jul 29 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中for与foreach的区别分析
2011/03/09 PHP
PHP实现的通过参数生成MYSQL语句类完整实例
2016/04/11 PHP
Zend Framework入门教程之Zend_Session会话操作详解
2016/12/08 PHP
[企业公众号]升级到[企业微信]之后发送消息失败的解决方法
2017/06/30 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
laravel按天、按小时,查询数据的实例
2019/10/09 PHP
jQuery 学习6 操纵元素显示效果的函数
2010/02/07 Javascript
jQuery入门第一课 jQuery选择符
2010/03/14 Javascript
JavaScript prototype属性使用说明
2010/05/13 Javascript
javascript开发技术大全 第4章 直接量与字符集
2011/07/03 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
2012/02/16 Javascript
JavaScript中双叹号!!作用示例介绍
2014/09/21 Javascript
JavaScript学习笔记之Function对象
2015/01/22 Javascript
jQuery插件Echarts实现的渐变色柱状图
2017/03/23 jQuery
用Nodejs搭建服务器访问html、css、JS等静态资源文件
2017/04/28 NodeJs
JS开发中基本数据类型具体有哪几种
2017/10/19 Javascript
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
2019/03/26 Javascript
构建一个JavaScript插件系统
2020/10/20 Javascript
Python实现获取域名所用服务器的真实IP
2015/10/25 Python
python实现字符串连接的三种方法及其效率、适用场景详解
2017/01/13 Python
win10系统下Anaconda3安装配置方法图文教程
2018/09/19 Python
PyTorch中常用的激活函数的方法示例
2019/08/20 Python
Pycharm创建python文件自动添加日期作者等信息(步骤详解)
2021/02/03 Python
英国电子产品购物网站:Tech in the basket
2019/11/08 全球购物
毕业生在校学习的自我评价分享
2013/10/08 职场文书
函授本科毕业自我鉴定
2013/10/09 职场文书
财务副总经理工作职责
2013/11/25 职场文书
护理实习自我鉴定
2013/12/14 职场文书
工作失误检讨书范文大全
2014/01/13 职场文书
自主招生推荐信范文
2014/05/10 职场文书
安全环保演讲稿
2014/08/28 职场文书
大学生迟到检讨书500字
2014/10/17 职场文书
2016元旦文艺汇演主持词
2015/07/06 职场文书
PyTorch dropout设置训练和测试模式的实现
2021/05/27 Python
古见同学有交流障碍症 第二季宣传CM公开播出
2022/04/11 日漫