一个简单的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 相关文章推荐
服务器安全设置的几个注册表设置
Jul 28 Javascript
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
Sep 15 Javascript
JavaScript Math.floor方法(对数值向下取整)
Jan 09 Javascript
js实现选中复选框文字变色的方法
Aug 14 Javascript
Sublime Text 3常用插件及安装方法
Dec 16 Javascript
浅谈javascript中new操作符的原理
Jun 07 Javascript
js获取form表单所有数据的简单方法
Aug 18 Javascript
json定义及jquery操作json的方法
Sep 29 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
Mar 20 Javascript
spirngmvc js传递复杂json参数到controller的实例
Mar 29 Javascript
解决vue props 拿不到值的问题
Sep 11 Javascript
为什么要使用Vuex的介绍
Jan 19 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 智能404跳转代码,适合换域名没改变目录的网站
2010/06/04 PHP
PHP中=赋值操作符对不同数据类型的不同行为
2011/01/02 PHP
PHP5权威编程阅读学习笔记 附电子书下载
2012/07/05 PHP
PHP错误机制知识汇总
2016/03/24 PHP
利用Laravel生成Gravatar头像地址的优雅方法
2017/12/30 PHP
PHP使用pdo实现事务处理操作示例
2018/09/05 PHP
面向对象的javascript(笔记)
2009/10/06 Javascript
jQuery获取css z-index在各种浏览器中的返回值
2010/09/15 Javascript
jQuery $.get 的妙用 访问本地文本文件
2012/07/12 Javascript
原生js实现查找/添加/删除/指定元素的class
2013/04/12 Javascript
Javascript操作URL函数修改版
2013/11/07 Javascript
深入理解javascript构造函数和原型对象
2014/09/23 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
2015/03/04 Javascript
js实现商城星星评分的效果
2015/12/29 Javascript
前端js文件合并的三种方式推荐
2016/05/19 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
2016/06/14 Javascript
JavaScript中自带的 reduce()方法使用示例详解
2016/08/10 Javascript
常用的javascript设计模式
2017/01/11 Javascript
bootstrap paginator分页前后台用法示例
2017/06/17 Javascript
nodejs对express中next函数的一些理解
2017/09/08 NodeJs
Node批量爬取头条视频并保存方法
2018/09/20 Javascript
小程序实现自定义导航栏适配完美版
2019/04/02 Javascript
[01:03]PWL开团时刻DAY6——别打我
2020/11/05 DOTA
Python的time模块中的常用方法整理
2015/06/18 Python
python实现图片处理和特征提取详解
2017/11/13 Python
Python多进程fork()函数详解
2019/02/22 Python
Python异常原理及异常捕捉实现过程解析
2020/03/25 Python
基于python 取余问题(%)详解
2020/06/03 Python
Python类super()及私有属性原理解析
2020/06/15 Python
师范院校学生自荐信范文
2013/12/27 职场文书
市场部岗位职责范本
2015/04/15 职场文书
警示教育观后感
2015/06/17 职场文书
标枪加油稿
2015/07/22 职场文书
python opencv常用图形绘制方法(线段、矩形、圆形、椭圆、文本)
2021/04/12 Python
springboot中一些比较常用的注解总结
2021/06/11 Java/Android
Python中22个万用公式的小结
2021/07/21 Python