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

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

　　以下是漸變的js代碼(表示多余三行的要隱藏點擊"more"顯示剩下的點擊“less”要逐漸隱藏)

復制代碼 代碼如下:
function showAccomplishmentTableRow(){
$("#accomplishmenttable tr:hidden")first()show(function(){
showAccomplishmentTableRow();
});
if($("#accomplishmenttable tr:hidden")size()==){
$("#accomplishmenttable")next()attr("onclick""hideAccomplishmentTableRow()")text("Less");
}
}
function hideAccomplishmentTableRow(){
if($("#accomplishmenttable tr:visible")size()<=){
$("#accomplishmenttable")next()attr("onclick""showAccomplishmentTableRow()")text("More");
return;
}

$("#accomplishmenttable tr:visible")last()hide(function(){
hideAccomplishmentTableRow();
});

}

　　
html

復制代碼 代碼如下:

　　
<table id="accomplishmenttable" class="bgWhite borderPGreyeee marginT roundedCorner widthP">
<tbody>
<tr class="bgLightGreyfff height">
<th class="border_bottomPgreyeee border_rightPgreyeee border_topPWhite fontGreyGeneral textCenter roundedCorner_TL verticalMiddle widthP" colspan="">MY ACCOMPLISHMENTS</th>
</tr>

<tr class="bgWhite height">
<td class="border_bottomPgreyeee border_rightPgreyeee fontGreyGeneral pFont widthP">
<div class="margin">border_bottomPgreyeee</div>
</td>
<td class="border_bottomPgreyeee border_rightPgreyeee fontGreyGeneral pFont textLeft widthP">
border_bottomPgreyeee
</td>
</tr>
<tr class="bgWhite height">
<td class="border_bottomPgreyeee border_rightPgreyeee fontGreyGeneral pFont widthP">
<div class="margin">border_bottomPgreyeee</div>
</td>
<td class="border_bottomPgreyeee border_rightPgreyeee fontGreyGeneral pFont textLeft widthP">
border_bottomPgreyeee
</td>
</tr>
</tbody>
</table>
<div class="floatR marginT pFont textLink" onclick="showAccomplishmentTableRow();">More</div>

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20415.html