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();
     });
     
}

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> 
                 

<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>
    

 

补充：web前端 , JavaScript ,

上一个：jquery_EasyUI的学习
下一个：Form 对象的集合