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> 

您可能感兴趣的文章:

Javascript中带名匿名箭头函数的重要区别(推荐)
这篇文章主要介绍了Javascript中带名匿名箭头函数的重要区别，非常不错，具有参考借鉴价值，需要的朋友参考下吧
2017-01-01
设置BFC功能及使用示例详解
这篇文章主要为大家介绍了设置BFC功能及使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
Bootstrap整体框架之CSS12栅格系统
这篇文章主要介绍了Bootstrap整体框架之CSS12栅格系统的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
微信小程序输入多行文本的实战记录
多行输入框组件是原生组件,这篇文章主要给大家介绍了关于微信小程序输入多行文本的相关资料,文中通过实例代码介绍的介绍的非常详细,需要的朋友可以参考下
2022-03-03
ES6关于Promise的用法详解
本篇文章主要介绍了ES6关于Promise的用法详解，详细的介绍了Promise的三种状态和方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面，需要的朋友可以参考下。
2011-05-05
js解决url传递中文参数乱码问题的方法详解
前后台用js传参过程中,如果是中文就容易出现乱码,下面这篇文章主要给大家介绍了关于js解决url传递中文参数乱码问题的的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-05-05
Javascript中找到子元素在父元素内相对位置的代码
因为想自动定位到子元素，所以一直在找各种找寻元素位置的代码。不过总是找不到可以定位子元素相对位置的代码
2012-07-07
Bootstrap基本组件学习笔记之分页(12)
这篇文章主要为大家详细介绍了Bootstrap基本组件学习笔记之分页,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
js 点击a标签获取a的自定义属性方法
下面小编就为大家带来一篇js 点击a标签获取a的自定义属性方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-11-11