一个简单的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 的addEventListener()及attachEvent()区别分析
May 21 Javascript
jQuery Flash/MP3/Video多媒体插件
Jan 18 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
Jun 12 Javascript
javascript教程之不完整的继承(js原型链)
Jan 13 Javascript
js 左右悬浮对联广告特效代码
Dec 12 Javascript
jQuery实现进度条效果代码
Dec 17 Javascript
盘点javascript 正则表达式中 中括号的【坑】
Mar 16 Javascript
把普通对象转换成json格式的对象的简单实例
Jul 04 Javascript
Js 获取、判断浏览器版本信息的简单方法
Aug 08 Javascript
JS对象的深度克隆方法示例
Mar 16 Javascript
Vue.js 中的 $watch使用方法
May 25 Javascript
vscode配置vue下的es6规范自动格式化详解
Mar 20 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读取xml方法介绍
2013/01/12 PHP
PHP 常用数组内部函数(Array Functions)介绍
2013/06/05 PHP
PHP 正则表达式常用函数
2014/08/17 PHP
jquery ready函数源代码研究
2009/12/06 Javascript
JavaScript开发规范要求(规范化代码)
2010/08/16 Javascript
javascript使用location.search的示例
2013/11/05 Javascript
使用jQuery仿苹果官网焦点图特效
2014/12/23 Javascript
jscript读写二进制文件的方法
2015/04/22 Javascript
JS实现的文字与图片定时切换效果代码
2015/10/06 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
2016/06/27 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
nodejs如何获取时间戳与时间差
2016/08/03 NodeJs
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
2016/12/08 Javascript
原生JS实现图片轮播切换效果
2016/12/15 Javascript
node.js连接MongoDB数据库的2种方法教程
2017/05/17 Javascript
EasyUI实现下拉框多选功能
2017/11/07 Javascript
AngularJS基于MVC的复杂操作实例讲解
2017/12/31 Javascript
AngularJS 监听变量变化的实现方法
2018/10/09 Javascript
如何让node运行es6模块文件及其原理详解
2018/12/11 Javascript
详解element-ui中el-select的默认选择项问题
2019/08/02 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
2019/09/19 Javascript
nodejs使用socket5进行代理请求的实现
2020/02/21 NodeJs
详解Python2.x中对Unicode编码的使用
2015/04/03 Python
Python实现Sqlite将字段当做索引进行查询的方法
2016/07/21 Python
pygame库实现移动底座弹球小游戏
2020/04/14 Python
Python使用py2neo操作图数据库neo4j的方法详解
2020/01/13 Python
python+pygame实现坦克大战小游戏的示例代码(可以自定义子弹速度)
2020/08/11 Python
python 5个实用的技巧
2020/09/27 Python
针对HTML5的Web Worker使用攻略
2015/07/12 HTML / CSS
澳大利亚领先的在线药房:Pharmacy Online(有中文站)
2020/02/22 全球购物
eHarmony英国:全球领先的认真恋爱约会平台之一
2020/11/16 全球购物
课程设计心得体会
2013/12/28 职场文书
女方回门宴答谢词
2014/01/14 职场文书
幼儿园教学随笔感言
2014/02/23 职场文书
MySQL高速缓存启动方法及参数详解(query_cache_size)
2021/07/01 MySQL
MySQL系列之十五 MySQL常用配置和性能压力测试
2021/07/02 MySQL