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