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 1.2.x 升? 1.3.x 注意事项
May 06 Javascript
javascript中的注释使用与注意事项小结
Sep 20 Javascript
Jquery 获取checkbox的checked问题
Nov 16 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
Aug 15 Javascript
登陆成功后自动计算秒数执行跳转
Jan 23 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
Sep 17 Javascript
JavaScript iframe数据共享接口实现方法
Jan 06 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
Jul 04 Javascript
Vue 组件修改根实例的数据的方法
Apr 02 Javascript
vue+elementUI实现表格关键字筛选高亮
Oct 26 Javascript
微信小程序全局变量的设置、使用、修改过程解析
Sep 24 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
Jun 02 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实现格式化文件数据大小显示的方法
2015/01/03 PHP
php实现阿拉伯数字和罗马数字相互转换的方法
2015/04/17 PHP
php中实现用数组妩媚地生成要执行的sql语句
2015/07/10 PHP
PHP实现Unicode编码相互转换的方法示例
2020/11/17 PHP
jquery 常用操作整理 基础入门篇
2009/10/14 Javascript
Firefox下提示illegal character并出现乱码的原因
2010/03/25 Javascript
javascript面向对象入门基础详细介绍
2012/09/05 Javascript
javascript强大的日期函数代码分享
2013/09/04 Javascript
jquery实现拖拽调整Div大小
2015/01/30 Javascript
浅谈Jquery为元素绑定事件
2015/04/27 Javascript
jquery基础知识第一讲之认识jquery
2016/03/17 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
2016/04/29 Javascript
学习Angular中作用域需要注意的坑
2016/08/17 Javascript
详解nodejs微信公众号开发——3.封装消息响应模块
2017/04/10 NodeJs
动态加载、移除js/css文件的示例代码
2018/03/20 Javascript
详解redis在nodejs中的应用
2018/05/02 NodeJs
vue动态改变背景图片demo分享
2018/09/13 Javascript
详解如何用VUE写一个多用模态框组件模版
2018/09/27 Javascript
Vue.js中 v-model 指令的修饰符详解
2018/12/03 Javascript
vue下载excel的实现代码后台用post方法
2019/05/10 Javascript
python数组过滤实现方法
2015/07/27 Python
Python3实现简单可学习的手写体识别(实例讲解)
2017/10/21 Python
用Q-learning算法实现自动走迷宫机器人的方法示例
2019/06/03 Python
python django框架中使用FastDFS分布式文件系统的安装方法
2019/06/10 Python
python pickle存储、读取大数据量列表、字典数据的方法
2019/07/07 Python
Python使用matplotlib实现交换式图形显示功能示例
2019/09/06 Python
pygame实现成语填空游戏
2019/10/29 Python
Python中常用的高阶函数实例详解
2020/02/21 Python
详解基于Jupyter notebooks采用sklearn库实现多元回归方程编程
2020/03/25 Python
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
2013/03/25 HTML / CSS
HTML5的download属性详细介绍和使用实例
2014/04/23 HTML / CSS
供应链金融服务方案
2014/05/25 职场文书
工作收入住址证明
2014/10/28 职场文书
小学推普周活动总结
2015/05/07 职场文书
职场新人刚入职工作总结该怎么写?
2019/05/15 职场文书
如何打开Win11系统注册表编辑器?Win11注册表编辑器打开修复方法
2022/04/05 数码科技