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中的call实现继承
Jan 22 Javascript
jquery 仿QQ校友的DIV模拟窗口效果源码
Mar 24 Javascript
jquery $(this).attr $(this).val方法使用介绍
Oct 08 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
Aug 21 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
Aug 17 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
Apr 25 Javascript
AngularJS封装$http.post()实例详解
May 06 Javascript
利用JS实现scroll自定义滚动效果详解
Oct 17 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
Dec 14 Javascript
浅谈vue项目可以从哪些方面进行优化
May 05 Javascript
AngularJS 监听变量变化的实现方法
Oct 09 Javascript
Vue组件生命周期运行原理解析
Nov 25 Vue.js
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
十大“创意”战术!
2020/03/04 星际争霸
php使用多个进程同时控制文件读写示例
2014/02/28 PHP
PHP遍历XML文档所有节点的方法
2015/03/12 PHP
修改WordPress中文章编辑器的样式的方法详解
2015/12/15 PHP
Zend Framework动作助手(Zend_Controller_Action_Helper)用法详解
2016/03/05 PHP
mac系统下为 php 添加 pcntl 扩展
2016/08/28 PHP
js中parseInt函数浅谈
2013/07/31 Javascript
js window.print实现打印特定控件或内容
2013/09/16 Javascript
javascript设计模式之解释器模式详解
2014/06/05 Javascript
原生js和jQuery随意改变div属性style的名称和值
2014/10/22 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
2015/02/28 Javascript
jquery validate.js表单验证入门实例(附源码)
2015/11/10 Javascript
图解prototype、proto和constructor的三角关系
2016/07/31 Javascript
Bootstrap Table的使用总结
2016/10/08 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
2016/10/14 Javascript
JavaScript中Math对象的方法介绍
2017/01/05 Javascript
利用iscroll4实现轮播图效果实例代码
2017/01/11 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
2017/08/16 Javascript
微信小程序自定义键盘 内部虚拟支付
2018/12/20 Javascript
如何进行微信公众号开发的本地调试的方法
2019/06/16 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
2019/09/06 Javascript
js实现类选择器和name属性选择器的示例步骤
2021/02/07 Javascript
PHP魔术方法__ISSET、__UNSET使用实例
2014/11/25 Python
用map函数来完成Python并行任务的简单示例
2015/04/02 Python
python实现向ppt文件里插入新幻灯片页面的方法
2015/04/28 Python
Python模拟登陆淘宝并统计淘宝消费情况的代码实例分享
2016/07/04 Python
python3下pygame如何实现显示中文
2020/01/11 Python
如何使用pandas读取txt文件中指定的列(有无标题)
2020/03/05 Python
python自动从arxiv下载paper的示例代码
2020/12/05 Python
纯CSS3实现8组超炫酷鼠标滑过图片动画
2016/03/16 HTML / CSS
博朗(Braun)俄罗斯官方商店:德国小家电品牌
2019/09/24 全球购物
艺术爱好者的自我评价分享
2013/10/08 职场文书
物业管理毕业生的自我评价
2014/02/17 职场文书
人力资源部门的主要职能
2014/02/22 职场文书
家庭贫困证明书(3篇)
2014/09/15 职场文书
黄石寨导游词
2015/02/05 职场文书