js渐变显示渐变消失示例代码

更新时间：2013年08月01日 15:53:13 作者：

渐变显示渐变消失的特殊效果在使用中还是比较常见的，本文简单的实现了一个，大家如何需要可以参考下

以下是渐变的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> 

您可能感兴趣的文章:

JS原生手写轮播图效果
这篇文章主要为大家详细介绍了JS原生手写轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-08-08
es6数组的flat()，flatMap()函数用法实例分析
这篇文章主要介绍了es6数组的flat()，flatMap()函数用法,结合实例形式分析了es6数组的flat()，flatMap()函数基本功能、使用方法及操作注意事项,需要的朋友可以参考下
2020-04-04
js实现显示当前状态的导航效果代码
这篇文章主要介绍了js实现显示当前状态的导航效果代码,涉及javascript通过鼠标点击事件动态改变页面元素属性的相关实现技巧,需要的朋友可以参考下
2015-08-08
关于uniapp的request封装保姆级教程
这篇文章主要给大家介绍了关于uniapp的request封装保姆级教程,request是基于uni-app框架封装的一个网络请求库,可以用于发送http请求和处理响应数据,需要的朋友可以参考下
2023-07-07
基于JS实现的消消乐游戏的示例代码
这篇文章主要为大家介绍了如何利用JS实现消消乐小游戏,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-04-04
JavaScript Date对象详解
这篇文章主要为大家详细介绍了JavaScript Date对象，介绍 Date 日期和时间对象的操作，感兴趣的小伙伴们可以参考一下
2016-03-03
浅谈FastClick 填坑及源码解析
这篇文章主要介绍了浅谈FastClick 填坑及源码解析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-03-03
使用javascript函数编写简单银行取钱存钱流程
本文通过实例代码给大家讲解了使用javascript函数编写简单银行取钱存钱流程，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
2018-05-05
from表单多个按钮提交用onclick跳转不同action
这篇文章主要介绍了from表单多个按钮提交用onclick跳转不同action,需要的朋友可以参考下
2014-04-04
点击广告后才能获得下载地址
点击广告后才能获得下载地址...
2006-10-10