zoukankan      html  css  js  c++  java
  • 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>
    				


  • 相关阅读:
    CORS详解
    JBoss 系列九十九:Rest WebService jBPM 6 集成演示样例
    atitit。浏览器缓存机制 and 微信浏览器防止缓存的设计 attilax 总结
    4G时代来临,运营商为谁搭台献唱?
    Pascal&#39;s Triangle II
    cocos2d-x 3.6版连连看载入资源
    SlidingMenu导入编译用法--Eclipse和IDEA
    【解决】hive动态添加partitions不能超过100的问题
    AngularJS clone directive 指令复制
    AndroidStudio文件夹结构视图讲解
  • 原文地址:https://www.cnblogs.com/dyllove98/p/3231155.html
Copyright © 2011-2022 走看看