js渐变显示渐变消失

以下是渐变的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" οnclick="showAccomplishmentTableRow();">More</div>
				

 

 

转载于:https://www.cnblogs.com/dyllove98/p/3231155.html