• 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" onclick="showAccomplishmentTableRow();">More</div>
    				


  • 相关阅读:
    Java 8 ThreadLocal 源码解析
    RabbitMQ 消息中间件
    MySQL 索引与查询优化
    MySQL EXPLAIN 命令: 查看查询执行计划
    迎来送往,开启新篇章
    mockito的用法
    推荐一个计算机的科普视频
    Golang查缺补漏(一)
    2019定个小目标
    golang 中的指针
  • 原文地址:https://www.cnblogs.com/dyllove98/p/3231155.html
Copyright © 2020-2023  润新知