js渐变显示渐变消失示例代码


Posted in Javascript onAugust 01, 2013

以下是渐变的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>
Javascript 相关文章推荐
JavaScript asp.net 获取当前超链接中的文本
Apr 14 Javascript
js模拟C#中List的简单实例
Mar 06 Javascript
禁用JavaScript控制台调试的方法
Mar 07 Javascript
JS实现一个按钮的方法
Feb 05 Javascript
JavaScript基础篇(6)之函数表达式闭包
Dec 11 Javascript
jQuery代码性能优化的10种方法
Jun 21 Javascript
vue获取dom元素注意事项
Dec 28 Javascript
JavaScript控制浏览器全屏显示简单示例
Jul 05 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
Nov 02 Javascript
JSON.stringify()方法讲解
Jan 31 Javascript
js中arguments对象的深入理解
May 14 Javascript
JS浮点数运算结果不精确的Bug解决
Aug 01 Javascript
jQuery点击弹出下拉菜单的小例子
Aug 01 #Javascript
JS调用CS里的带参方法实例
Aug 01 #Javascript
js中方法重载如何实现?以及函数的参数问题
Aug 01 #Javascript
子窗体与父窗体传值示例js代码
Aug 01 #Javascript
根据选择不同的下拉值出现相对应的文本输入框
Aug 01 #Javascript
jquery图片放大功能简单实现
Aug 01 #Javascript
基于jquery的文章中所有图片width大小批量设置方法
Aug 01 #Javascript
You might like
php生成随机密码的几种方法
2011/01/17 PHP
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
2015/12/21 PHP
PHP学习笔记之php文件操作
2016/06/03 PHP
Laravel实现自定义错误输出内容的方法
2016/10/10 PHP
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
2011/07/31 Javascript
文档对象模型DOM通俗讲解
2013/11/01 Javascript
jquery中post方法用法实例
2014/10/21 Javascript
node.js中的console.time方法使用说明
2014/12/09 Javascript
通过一个简单的例子学会vuex与模块化
2017/11/22 Javascript
vue.js使用watch监听路由变化的方法
2018/07/08 Javascript
JS实现select选中option触发事件操作示例
2018/07/13 Javascript
微信小程序实现顶部下拉菜单栏
2018/11/04 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
2019/01/25 Javascript
vue使用keep-alive保持滚动条位置的实现方法
2019/04/09 Javascript
Vue项目路由刷新的实现代码
2019/04/17 Javascript
js获取url页面id,也就是最后的数字文件名
2020/09/25 Javascript
vue项目打包后请求地址错误/打包后跨域操作
2020/11/04 Javascript
[03:02]辉夜杯主赛事第二日 每日之星
2015/12/27 DOTA
Python获取apk文件URL地址实例
2013/11/01 Python
跟老齐学Python之编写类之三子类
2014/10/11 Python
Python使用reportlab模块生成PDF格式的文档
2019/03/11 Python
Python上下文管理器用法及实例解析
2019/11/11 Python
python 图像插值 最近邻、双线性、双三次实例
2020/07/05 Python
CSS3混合模式mix-blend-mode/background-blend-mode简介
2018/03/15 HTML / CSS
CSS3 @keyframes简单动画实现
2018/02/24 HTML / CSS
美国女士时尚珠宝及配饰购物网站:Icing
2018/07/02 全球购物
毕业生应聘幼儿园的自荐信
2013/11/20 职场文书
运动会通讯稿100字
2014/01/31 职场文书
清明节演讲稿
2014/05/27 职场文书
学校领导班子四风问题整改意见
2014/10/02 职场文书
运动会广播稿200字(10篇)
2014/10/12 职场文书
党员自我评价2015
2015/03/03 职场文书
小学毕业感言200字
2015/07/30 职场文书
大学生如何逃脱“毕业季创业队即散伙”魔咒?
2019/08/19 职场文书
导游词之江西赣州
2019/10/15 职场文书
Unicode中的CJK(中日韩统一表意文字)字符小结
2021/12/06 HTML / CSS