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 相关文章推荐
最简单的js图片切换效果实现代码
Sep 24 Javascript
SuperSlide2实现图片滚动特效
Jun 20 Javascript
JavaScript操作Oracle数据库示例
Mar 06 Javascript
jquery中map函数遍历数组用法实例
May 18 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
Dec 21 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
Jan 10 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
Mar 15 Javascript
vue中mint-ui环境搭建详细介绍
Apr 06 Javascript
微信小程序使用navigateTo数据传递的实例
Sep 26 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
Aug 31 Javascript
javascript防抖函数debounce详解
Jun 11 Javascript
判断“命令按钮”是否被鼠标单击详解
Jul 31 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
Terran热键控制
2020/03/14 星际争霸
php db类库进行数据库操作
2009/03/19 PHP
PHP 巧用数组降低程序的时间复杂度
2010/01/01 PHP
php 输出双引号&quot;与单引号'的方法
2010/05/09 PHP
php实现图片上传并进行替换操作
2016/03/15 PHP
详谈配置phpstorm完美支持Codeigniter(CI)代码自动完成(代码提示)
2017/04/07 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
分享一个自己写的简单的javascript分页组件
2015/02/15 Javascript
jQuery解决input超多的表单提交
2015/08/10 Javascript
深入学习AngularJS中数据的双向绑定机制
2016/03/04 Javascript
JavaScript中值类型和引用类型的区别
2017/02/23 Javascript
jQuery dateRangePicker插件使用方法详解
2017/07/28 jQuery
Angular实现的敏感文字自动过滤与提示功能示例
2017/12/29 Javascript
在Vue中使用Compass的方法
2018/03/02 Javascript
使用Vue实现图片上传的三种方式
2018/07/17 Javascript
VUE 配置vue-devtools调试工具及安装方法
2018/09/30 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
2019/06/06 Javascript
vue从零实现一个消息通知组件的方法详解
2020/03/16 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
2020/05/06 Javascript
javascript实现时钟动画
2020/12/03 Javascript
python re模块findall()函数实例解析
2018/01/19 Python
Python对CSV、Excel、txt、dat文件的处理
2018/09/18 Python
Tensorflow实现神经网络拟合线性回归
2019/07/19 Python
numpy 矩阵形状调整:拉伸、变成一位数组的实例
2020/06/18 Python
记一次django内存异常排查及解决方法
2020/08/07 Python
纽约复古灵感的现代珠宝品牌:Lulu Frost
2018/03/03 全球购物
曼城官方网上商店:Manchester City
2019/09/10 全球购物
西部世纪面试题
2014/12/05 面试题
关于递归的一道.NET面试题
2013/05/12 面试题
介绍一下Ruby中的对象,属性和方法
2012/07/11 面试题
项目合作计划书
2014/01/09 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
个人四风对照检查材料
2014/09/26 职场文书
祝福语集锦:朋友新店开业祝福语
2019/12/10 职场文书
MySQL数据库 安全管理
2022/05/06 MySQL
Python Matplotlib绘制动画的代码详解
2022/05/30 Python