zl程序教程

您现在的位置是:首页 >  后端

当前栏目

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

JS代码 示例 显示 消失 渐变
2023-06-13 09:15:03 时间
以下是渐变的js代码(表示多余三行的要隐藏,点击"more"显示剩下的,点击“less”要逐渐隐藏):
复制代码代码如下:

functionshowAccomplishmentTableRow(){
$("#accomplishmenttabletr:hidden").first().show(2000,function(){
showAccomplishmentTableRow();
});
if($("#accomplishmenttabletr:hidden").size()==0){
$("#accomplishmenttable").next().attr("onclick","hideAccomplishmentTableRow()").text("Less");
}
}
functionhideAccomplishmentTableRow(){
if($("#accomplishmenttabletr:visible").size()<=3){
$("#accomplishmenttable").next().attr("onclick","showAccomplishmentTableRow()").text("More");
return;
}

$("#accomplishmenttabletr:visible").last().hide(2000,function(){
hideAccomplishmentTableRow();
});

}

html
复制代码代码如下:

<tableid="accomplishmenttable"class="bgWhiteborder3PGreye7e7e7marginT20roundedCornerwidth100P">
<tbody>
<trclass="bgLightGreyf5f5f5height40">
<thclass="border_bottom3Pgreye7e7e7border_right1Pgreye7e7e7border_top1PWhitefontGreyGeneraltextCenterroundedCorner_TLverticalMiddlewidth30P"colspan="2">MYACCOMPLISHMENTS</th>
</tr>

<trclass="bgWhiteheight40">
<tdclass="border_bottom1Pgreye7e7e7border_right1Pgreye7e7e7fontGreyGeneralp14Fontwidth20P">
<divclass="margin5">border_bottom1Pgreye7e7e7</div>
</td>
<tdclass="border_bottom1Pgreye7e7e7border_right1Pgreye7e7e7fontGreyGeneralp14FonttextLeftwidth80P">
border_bottom1Pgreye7e7e7
</td>
</tr>
<trclass="bgWhiteheight40">
<tdclass="border_bottom1Pgreye7e7e7border_right1Pgreye7e7e7fontGreyGeneralp14Fontwidth20P">
<divclass="margin5">border_bottom1Pgreye7e7e7</div>
</td>
<tdclass="border_bottom1Pgreye7e7e7border_right1Pgreye7e7e7fontGreyGeneralp14FonttextLeftwidth80P">
border_bottom1Pgreye7e7e7
</td>
</tr>
</tbody>
</table>
<divclass="floatRmarginT5p14FonttextLink"onclick="showAccomplishmentTableRow();">More</div>