js渐变显示渐变消失

来源：互联网发布：龙升级数据编辑：程序博客网时间：2024/05/01 19:22

以下是渐变的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>