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>
js渐变显示渐变消失的更多相关文章
- 渐变显示渐变消失的BackgroundView
渐变显示渐变消失的BackgroundView 效果如下: 源码: BackgroundView.h 与 BackgroundView.m // // BackgroundView.h // Test ...
- 功能整合(一):滚动条的变相隐藏、js控制div的渐变显示、滚动条监听
1.滚动条的变相隐藏 思路: 1. 把body的横向,纵向的超出部分隐藏,宽设置100%:高设置100%.就没有body的滚动条了, 2. 然后把最外层的div的宽设置的比body的宽宽一点,把d ...
- 【原生JS】自动渐变轮播
渐变主要是通过CSS3的动画实现. 只需给css中添加transtion动画时间加上JS设置指定图片透明度显示与消失即可实现渐变过程. 效果图: HTML: <!DOCTYPE html> ...
- [js高手之路] html5 canvas系列教程 - 线形渐变,径向渐变与阴影设置
接着上文[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)继续. 一.线形渐变 线形渐变指的是一条直线上发生的渐变. 用法: var linear ...
- WPF在3D Cad模型中利用TextureCoordinates实现颜色渐变显示偏差值的变化
原文:WPF在3D Cad模型中利用TextureCoordinates实现颜色渐变显示偏差值的变化 注:最近在做3D机械模型重建方面的软件,需要根据光栅传感器采集的数据绘制3D图形,并显示出色差以及 ...
- 使用jquery实现文本框输入特效:文字逐个显示逐个消失反复循环
前两天看到某个网站上的输入框有个小特效:文字逐个显示,并且到字符串最大长度后,逐个消失,然后重新循环显示消失,循环显示字符串数组.我对这个小特效有点好奇,于是今天自己尝试用jquery写一个简单的小d ...
- CSS3渐变——径向渐变
上节在<再说CSS3渐变——线性渐变>和大家一起学习了CSS3 Gradient中径向渐变最新语法(称得上是W3C的标准语法)相关知识以及其基本使用.今天我们在这一篇中主要和大家一起来了解 ...
- js倒计时显示
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...
- Js控制显示、隐藏文本框中的密码
Js控制显示.隐藏文本框中的密码,也可称为是一款小型的JavaScript星号密码破解器,点击会显示出密码类型的文本框中的真实信息,再次点击则还原,程序 主要是获取HTML元素对象,然后强制更改元素属 ...
随机推荐
- absolute和relative的几个Demo
这些例子最好通过FireFox结合FireBug调试查看 1.absolute让元素inline-block化 <!DOCTYPE html> <html xmlns="h ...
- 【DataStructure In Python】Python实现各种排序算法
使用Python实现直接插入排序.希尔排序.简单选择排序.冒泡排序.快速排序.归并排序.基数排序. #! /usr/bin/env python # DataStructure Sort # Inse ...
- Android开发之应用程序窗体显示状态操作(requestWindowFeature()的应用)
转自:http://www.cnblogs.com/salam/archive/2010/11/30/1892143.html 我们在开发程序是经常会需要软件全屏显示.自定义标题(使用按钮等控件)和其 ...
- 如何计算IP地址及CIDR,子网掩码计算
如何计算IP地址及CIDR 一. IP地址概念 IP地址是一个32位的二进制数,它由网络ID和主机ID两部份组成,用来在网络中唯一的标识的一台计算机.网络ID用来标识计算机所处的网段:主 机ID用来标 ...
- Linux kernel 拒绝服务漏洞
漏洞名称: Linux kernel 拒绝服务漏洞 CNNVD编号: CNNVD-201311-020 发布时间: 2013-11-05 更新时间: 2013-11-05 危害等级: 漏洞类型: ...
- NOI2010超级钢琴 2
2006: [NOI2010]超级钢琴 Time Limit: 20 Sec Memory Limit: 552 MBSubmit: 1296 Solved: 606[Submit][Status ...
- 指令 scope
angular学习笔记(三十)-指令(8)-scope <!DOCTYPE html> <html ng-app="myApp"> <head> ...
- c语言_文件操作_FILE结构体解释_涉及对操作系统文件FCB操作的解释_
1. 文件和流的关系 C将每个文件简单地作为顺序字节流(如下图).每个文件用文件结束符结束,或者在特定字节数的地方结束,这个特定的字节数可以存储在系统维护的管理数据结构中.当打开文件时,就建立了和文件 ...
- [转]ASP.NET MVC 入门7、Hellper与数据的提交与绑定
ASP.NET MVC提供了很多Hellper的方法,Hellper就是一些生成HTML代码的方法,方便我们书写HTML代码(有一部分的朋友更喜欢直接写HTML代码).我们也可以利用.NET 3.5的 ...
- ESB、SOA、EAI异同【转】
先说概念: ESB:企业服务总线(ESB : Enterprise Service Bus):ESB 是一种开放的.基于标准的分布式同步或异步信息传递中间件.通过 XML.Web Serv ...