一个简单的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动态增加删除表格行的小例子
Nov 14 Javascript
jquery prop的使用介绍及与attr的区别
Dec 19 Javascript
jquery遍历select元素(实例讲解)
Dec 31 Javascript
jQuery插件Validate实现自定义表单验证
Jan 18 Javascript
js阻止浏览器默认行为的简单实例
May 15 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
May 30 Javascript
详解JavaScript模块化开发
Dec 04 Javascript
详解vue项目的构建,打包,发布全过程
Nov 23 Javascript
JS实现面向对象继承的5种方式分析
Jul 21 Javascript
jquery+php后台实现省市区联动功能示例
May 23 jQuery
jQuery实现轮播图效果
Nov 26 jQuery
JavaScript 接口原理与用法实例详解
May 12 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 PDO函数库详解
2010/04/27 PHP
PHP实现服务器状态监控的方法
2014/12/09 PHP
php识别翻转iphone拍摄的颠倒图片
2018/05/17 PHP
Laravel 连接(Join)示例
2019/10/16 PHP
js输出阴历、阳历、年份、月份、周示例代码
2014/01/29 Javascript
document.compatMode的CSS1compat使用介绍
2014/04/03 Javascript
NodeJS学习笔记之FS文件模块
2015/01/13 NodeJs
jQuery源码解读之hasClass()方法分析
2015/02/20 Javascript
nodejs导出excel的方法
2015/06/30 NodeJs
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
2015/08/12 Javascript
js判断所有表单项不为空则提交表单的实现方法
2016/09/09 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
2016/12/01 Javascript
NodeJS仿WebApi路由示例
2017/02/28 NodeJs
H5实现中奖记录逐行滚动切换效果
2017/03/13 Javascript
node.js 利用流实现读写同步,边读边写的方法
2017/09/11 Javascript
微信小程序封装多张图片上传api代码实例
2019/12/30 Javascript
[02:40]DOTA2殁境神蚀者 英雄基础教程
2013/11/26 DOTA
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
Python 安装setuptools和pip工具操作方法(必看)
2017/05/22 Python
基于ID3决策树算法的实现(Python版)
2017/05/31 Python
使用python和pygame绘制繁花曲线的方法
2018/02/24 Python
解决Pycharm无法import自己安装的第三方module问题
2018/05/18 Python
PYTHON实现SIGN签名的过程解析
2019/10/28 Python
Python 爬取必应壁纸的实例讲解
2020/02/24 Python
Pytorch 使用 nii数据做输入数据的操作
2020/05/26 Python
荷兰优雅女装网上商店:Heine
2016/11/14 全球购物
编程实现当输入某产品代码则打印出该产品记录的功能
2014/05/03 面试题
某公司.Net方向面试题
2014/04/24 面试题
生物化学研究助理员求职信
2013/10/09 职场文书
大学本科毕业生的自我鉴定
2013/11/26 职场文书
房屋改造计划书
2014/01/10 职场文书
土建工程师岗位职责
2014/06/10 职场文书
电子工程求职信
2014/07/17 职场文书
领导干部群众路线剖析材料
2014/10/09 职场文书
保证金退回承诺函格式
2015/01/21 职场文书
德劲DE1102数字调谐收音机机评
2022/04/07 无线电