一个简单的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 相关文章推荐
javascript 写类方式之一
Jul 05 Javascript
javascript中eval函数用法分析
Apr 25 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
Oct 14 Javascript
基于JS实现无缝滚动思路及代码分享
Jun 07 Javascript
Vue.js动态组件解析
Sep 09 Javascript
浅谈angularjs module返回对象的坑(推荐)
Oct 21 Javascript
Vue数据驱动模拟实现4
Jan 12 Javascript
Node.js  REPL (交互式解释器)实例详解
Aug 06 Javascript
javascript 判断用户有没有操作页面
Oct 17 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
May 07 Javascript
vue项目中引入vue-datepicker插件的详解
May 14 Javascript
微信小程序实现原生步骤条
Jul 25 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
收音机玩机评测 406 篇视频合集
2020/03/11 无线电
windows xp下安装pear
2006/12/02 PHP
php URL跳转代码 减少外链
2011/06/25 PHP
两种设置php载入页面时编码的方法
2014/07/29 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
js 表单验证方法(实用)
2009/04/28 Javascript
js 可拖动列表实现代码
2011/12/13 Javascript
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
js 实现菜单上下显示附效果图
2013/11/21 Javascript
jquery制作漂亮的弹出层提示消息特效
2014/12/23 Javascript
简述JavaScript中正则表达式的使用方法
2015/06/15 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
使用Bootstrap美化按钮实例代码(demo)
2017/02/03 Javascript
JavaScript数据结构中串的表示与应用实例
2017/04/12 Javascript
js中的闭包学习心得
2018/02/06 Javascript
小程序实现多列选择器
2019/02/15 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
2019/08/26 Javascript
Electron 调用命令行(cmd)
2019/09/23 Javascript
Python中使用第三方库xlrd来读取Excel示例
2015/04/05 Python
利用Python实现在同一网络中的本地文件共享方法
2018/06/04 Python
python中for循环输出列表索引与对应的值方法
2018/11/07 Python
python+openCV调用摄像头拍摄和处理图片的实现
2019/08/06 Python
Python使用scrapy爬取阳光热线问政平台过程解析
2019/08/14 Python
docker-py 用Python调用Docker接口的方法
2019/08/30 Python
Python中用pyinstaller打包时的图标问题及解决方法
2020/02/17 Python
Python 多线程C段扫描、检测 Ping扫描脚本的实现
2020/09/03 Python
兼职学生的自我评价
2013/11/24 职场文书
小学运动会广播稿200字(十二篇)
2014/01/14 职场文书
小学教师师德承诺书
2014/05/23 职场文书
物理系毕业生自荐书
2014/06/13 职场文书
优秀家长自荐材料
2014/08/26 职场文书
代理人委托书
2014/09/16 职场文书
2015年员工试用期工作总结
2015/05/28 职场文书
springboot如何初始化执行sql语句
2021/06/22 Java/Android
laravel添加角色和模糊搜索功能的实现代码
2021/06/22 PHP
sql server偶发出现死锁的解决方法
2022/04/10 SQL Server