一个简单的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 相关文章推荐
浏览器常用高宽的jquery插件
Feb 24 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
Apr 17 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
Nov 19 Javascript
jQuery 删除/替换DOM元素的几种方式
May 20 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
Aug 31 Javascript
javascript+css3 实现动态按钮菜单特效
Feb 06 Javascript
微信小程序 location API实例详解
Oct 02 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
Nov 01 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
Dec 30 Javascript
详解微信小程序支付流程与梳理
Jul 16 Javascript
Jquery动态列功能完整实例
Aug 30 jQuery
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
Jan 26 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
探讨fckeditor在Php中的配置详解
2013/06/08 PHP
Yii核心组件AssetManager原理分析
2014/12/02 PHP
PHP编程中尝试程序并发的几种方式总结
2016/03/21 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
js中document.getElementByid、document.all和document.layers区分介绍
2011/12/08 Javascript
js实现获取div坐标的方法
2015/11/16 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
2016/08/25 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
2017/02/15 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
2017/04/11 jQuery
jQuery手风琴的简单制作
2017/05/12 jQuery
原生JS实现自定义滚动条效果
2020/10/27 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
2018/01/20 Javascript
vue.js打包之后可能会遇到的坑!
2018/06/03 Javascript
electron + vue项目实现打印小票功能及实现代码
2018/11/25 Javascript
Vue+Element-U实现分页显示效果
2020/11/15 Javascript
[01:14:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Orenda
2014/05/22 DOTA
linux系统使用python监测网络接口获取网络的输入输出
2014/01/15 Python
Python利用pyHook实现监听用户鼠标与键盘事件
2014/08/21 Python
Python实现随机生成有效手机号码及身份证功能示例
2017/06/05 Python
Python 多进程和数据传递的理解
2017/10/09 Python
批量将ppt转换为pdf的Python代码 只要27行!
2018/02/26 Python
tensorflow获取变量维度信息
2018/03/10 Python
Python操作MySQL模拟银行转账
2018/03/12 Python
python是否适合网页编程详解
2019/10/04 Python
使用PyTorch将文件夹下的图片分为训练集和验证集实例
2020/01/08 Python
Monnier Frères美国官网:法国知名奢侈品网站
2016/11/22 全球购物
澳大利亚票务和娱乐市场领导者:Ticketmaster
2017/03/03 全球购物
饿了么订餐官网:外卖、网上订餐
2019/06/28 全球购物
新驾驶员个人自我评价
2014/01/03 职场文书
优秀教师主要事迹
2014/02/01 职场文书
国家奖学金获奖感言
2014/08/16 职场文书
美丽人生观后感
2015/06/03 职场文书
离婚财产分割协议书
2015/08/11 职场文书
2019职场实习报告该怎么写?
2019/07/01 职场文书
送给火锅店的创意营销方案!
2019/07/08 职场文书
linux中nohup和后台运行进程查看及终止
2021/06/24 Python