一个简单的js渐显(fadeIn)渐隐(fadeOut)类


Posted in Javascript onJune 19, 2010

要兼容IE(element.style.filter = 'alpha(opacity=value)')和非IE(element.style.opacity=value)就可以了。
另,还要注意,非IEopaciy的值是0~1之间,IE是1-100。

一个简单的js渐显(fadeIn)渐隐(fadeOut)类

 

一个简单的js渐显(fadeIn)渐隐(fadeOut)类

下面,贴代码:

/** 
* @projectDescription 动画(渐显、渐隐)类 
* /** 
* @projectDescription KINGKIT UI 
* @date 2010-6-1 
* @author Kit.Liao 
* @copyright kingkit.com.cn 
* @version 0.9.0 
* @感谢:http://www.cnblogs.com/rubylouvre/archive/2009/09/16/1566699.html 
* 使用示例:渐显:KUI.Animation.fadeIn(el);渐隐:KUI.Animation.fadeOut(el) 
*/ 
KUI.Animation = { 
fadeIn: function(id){ 
this.fade(id, true); 
}, 
fadeOut: function(id){ 
this.fade(id, false); 
}, 
fade: function(id, flag){ 
var target = KUI.get(id); 
target.alpha = flag?1:100; 
target.style.opacity = (target.alpha / 100); 
target.style.filter = 'alpha(opacity=' + target.alpha + ')'; 
var value = target.alpha; 
(function(){ 
target.style.opacity = (value / 100); 
target.style.filter = 'alpha(opacity=' + value + ')'; 
if (flag) { 
value++; 
if (value <= 100) { 
setTimeout(arguments.callee, 15);//继续调用本身 
} 
} 
else { 
value--; 
if (value >= 0) { 
setTimeout(arguments.callee, 15);//继续调用本身 
} 
} 
})(); 
} 
}

打包下载
Javascript 相关文章推荐
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
Mar 27 Javascript
基于jquery的图片幻灯展示源码
Jul 15 Javascript
JavaScript中valueOf函数与toString方法深入理解
Dec 02 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
Apr 11 Javascript
JavaScript Math.floor方法(对数值向下取整)
Jan 09 Javascript
js滑动提示效果代码分享
Mar 10 Javascript
javascript的几种写法总结
Sep 30 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
Jul 02 Javascript
Vue核心概念Getter的使用方法
Jan 18 Javascript
在vue和element-ui的table中实现分页复选功能
Dec 04 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
Sep 04 Javascript
javascript实现移动端轮播图
Dec 09 Javascript
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
Jun 19 #Javascript
WEB高性能开发之疯狂的HTML压缩
Jun 19 #Javascript
Html中JS脚本执行顺序简单举例说明
Jun 19 #Javascript
js parseInt(&quot;08&quot;)未指定进位制问题
Jun 19 #Javascript
ExtJs grid行 右键菜单的两种方法
Jun 19 #Javascript
JavaScript中也使用$美元符号来代替document.getElementById
Jun 19 #Javascript
javascript,jquery闭包概念分析
Jun 19 #Javascript
You might like
PHP容易被忽略而出错陷阱 数字与字符串比较
2011/11/10 PHP
php中将汉字转换成拼音的函数代码
2012/09/08 PHP
使用session判断用户登录用户权限(超简单)
2013/06/08 PHP
PHP循环输出指定目录下的所有文件和文件夹路径例子(简单实用)
2014/05/10 PHP
解决CodeIgniter伪静态失效
2014/06/09 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
Javascript中的数学函数集合
2007/05/08 Javascript
js 编写规范
2010/03/03 Javascript
浅析tr的隐藏和显示问题
2014/03/05 Javascript
jquery获取tagName再进行判断
2014/05/29 Javascript
javascript倒计时效果实现
2015/11/12 Javascript
详解JS中Array对象扩展与String对象扩展
2016/01/07 Javascript
js实现(全选)多选按钮的方法【附实例】
2016/03/30 Javascript
json格式的javascript对象用法分析
2016/07/04 Javascript
基于BootstrapValidator的Form表单验证(24)
2016/12/12 Javascript
JS跳转手机站url的若干注意事项
2017/10/18 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
2018/02/24 Javascript
vue超时计算的组件实例代码
2018/07/09 Javascript
js中switch语句的学习笔记
2020/03/25 Javascript
vscode+gulp轻松开发小程序的完整步骤
2020/10/18 Javascript
[54:33]2018DOTA2亚洲邀请赛小组赛 A组加赛 Liquid vs Optic
2018/04/03 DOTA
[53:03]Optic vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python3 破解 geetest(极验)的滑块验证码功能
2018/02/24 Python
django admin后台添加导出excel功能示例代码
2019/05/15 Python
Django框架反向解析操作详解
2019/11/28 Python
python 实现在shell窗口中编写print不向屏幕输出
2020/02/19 Python
python爬虫今日热榜数据到txt文件的源码
2021/02/23 Python
快时尚眼镜品牌,全国连锁眼镜店:LOHO眼镜生活
2018/10/08 全球购物
Parfumdreams英国:香水和化妆品
2019/05/10 全球购物
保安员岗位职责
2013/11/17 职场文书
机电一体化职业规划书
2014/01/07 职场文书
幼儿园毕业寄语
2014/04/03 职场文书
岗位说明书范文
2014/05/07 职场文书
求职信内容怎么写
2014/05/26 职场文书
2015年暑假生活总结
2015/07/13 职场文书
JavaScript 中for/of,for/in 的详细介绍
2021/11/17 Javascript