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 相关文章推荐
js三种排序算法分享
Aug 16 Javascript
js函数setTimeout延迟执行的简单介绍
Jul 17 Javascript
ExtJS4中的requires使用方法示例介绍
Dec 03 Javascript
JS实现跟随鼠标的链接文字提示框效果
Aug 06 Javascript
跟我学习javascript的arguments对象
Nov 16 Javascript
JavaScript正则表达式简单实用实例
Jun 23 Javascript
ReactNative中使用Redux架构总结
Dec 15 Javascript
Vue中如何实现proxy代理
Apr 20 Javascript
React styled-components设置组件属性的方法
Aug 07 Javascript
解决Angular4项目部署到服务器上刷新404的问题
Aug 31 Javascript
JavaScript之实现一个简单的Vue示例
Jan 17 Javascript
你准备好迎接vue3.0了吗
Apr 28 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+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
php中截取中文字符串的代码小结
2011/07/17 PHP
php中将汉字转换成拼音的函数代码
2012/09/08 PHP
php 邮件发送问题解决
2014/03/22 PHP
PHP中使用glob函数实现一句话删除某个目录下的所有文件
2014/07/22 PHP
PHP中error_log()函数的使用方法
2015/01/20 PHP
Thinkphp实现站点静态化的方法详解
2017/03/21 PHP
javascript改变position值实现菜单滚动至顶部后固定
2013/01/18 Javascript
js 剪切板应用clipboardData详细解析
2013/12/17 Javascript
JavaScript中的prototype.bind()方法介绍
2014/04/04 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
2015/07/29 Javascript
swtich/if...else的替代语句
2015/08/16 Javascript
ArtEditor富文本编辑器增加表单提交功能
2016/04/18 Javascript
jQuery实现遮罩层登录对话框
2016/12/29 Javascript
jQuery滚动监听实现商城楼梯式导航效果
2017/03/06 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
2017/10/31 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
2018/02/04 Javascript
vue里面使用mui的弹出日期选择插件实例
2018/09/16 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
2018/09/21 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
2018/11/30 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
2019/05/23 Javascript
JS替换字符串中指定位置的字符(多种方法)
2020/05/28 Javascript
原生JavaScript实现换肤
2021/02/19 Javascript
[01:40]2014DOTA2国际邀请赛 三冰SOLO赛后采访恶搞
2014/07/09 DOTA
python编写的最短路径算法
2015/03/25 Python
深入理解Python中字典的键的使用
2015/08/19 Python
pandas ix &amp;iloc &amp;loc的区别
2019/01/10 Python
flask框架配置mysql数据库操作详解
2019/11/29 Python
python如何通过twisted搭建socket服务
2020/02/03 Python
Python爬虫之爬取淘女郎照片示例详解
2020/07/28 Python
基于python实现监听Rabbitmq系统日志代码示例
2020/11/28 Python
详解利用css3的var()实现运行时改变scss的变量值
2021/03/02 HTML / CSS
投资协议书范本
2014/04/21 职场文书
幼儿教师辞职信范文
2015/03/02 职场文书
五星级酒店宣传口号
2015/12/25 职场文书
Python之matplotlib绘制折线图
2022/04/13 Python