快捷導(dǎo)航

js漸變顯示漸變消失示例代碼

更新時(shí)間：2013年08月01日 15:53:13 作者：

漸變顯示漸變消失的特殊效果在使用中還是比較常見的，本文簡單的實(shí)現(xiàn)了一個(gè)，大家如何需要可以參考下

以下是漸變的js代碼(表示多余三行的要隱藏，點(diǎn)擊"more"顯示剩下的，點(diǎn)擊“l(fā)ess”要逐漸隱藏)：

 
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

復(fù)制代碼代碼如下:

 
<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> 

您可能感興趣的文章:

相關(guān)文章

Javascript 字符串模板的簡單實(shí)現(xiàn)
這篇文章給大家描述的是如何一步步簡單的實(shí)現(xiàn)Javascript 字符串模板，對(duì)于初學(xué)javascript的菜鳥們來說應(yīng)該是篇不錯(cuò)的文章，希望對(duì)大家能夠有所幫助。
2016-02-02
webpack中多文件打包配置的詳細(xì)流程
這篇文章主要介紹了webpack中多文件打包配置的詳細(xì)流程,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2023-11-11
Kindeditor單獨(dú)調(diào)用單圖上傳增加預(yù)覽功能的實(shí)例
下面小編就為大家?guī)硪黄狵indeditor單獨(dú)調(diào)用單圖上傳增加預(yù)覽功能的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-07-07
JS+CSS3制作炫酷的彈窗效果
本文給大家分享使用js和css3制作的炫酷彈窗效果，整個(gè)背景模糊，要比純色加透明度高大上好多。對(duì)js彈窗效果感興趣的朋友一起學(xué)習(xí)吧
2016-11-11
JavaScript實(shí)例--實(shí)現(xiàn)計(jì)算器
這篇文章主要介紹了JavaScript實(shí)現(xiàn)計(jì)算器，下面文章實(shí)現(xiàn)計(jì)算器作為學(xué)習(xí)期間的一個(gè)小練習(xí)，需要的小伙伴可以參考一下，希望對(duì)你有所幫助
2022-01-01
JS實(shí)現(xiàn)隨機(jī)數(shù)生成算法示例代碼
JS實(shí)現(xiàn)隨機(jī)數(shù)生成算法的方法有很多，本文為大家介紹一個(gè)比較不錯(cuò)的方法，代碼如下，感興趣的朋友可以參考下，希望對(duì)大家有所幫助
2013-08-08
判斷橫屏豎屏（三種）
本文主要介紹了通過HTML，CSS，JS三種判斷橫屏豎屏的方法。具有很好的參考價(jià)值，下面跟著小編一起來看下吧
2017-02-02
舉例講解JavaScript substring()的使用方法
這篇文章主要通過舉例的方法講解了javaScript substring()的用法，substring() 方法用于提取字符串中介于兩個(gè)指定下標(biāo)之間的字符，感興趣的小伙伴們可以參考一下
2015-11-11
DIV任意拖動(dòng)的問題
DIV任意拖動(dòng)的問題...
2006-07-07
JS 實(shí)現(xiàn)分頁打印功能
這篇文章主要介紹了JS 實(shí)現(xiàn)分頁打印功能的相關(guān)資料,需要的朋友可以參考下
2018-05-05