一个简单的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 相关文章推荐
不用MOUSEMOVE也能滑动啊
May 23 Javascript
javascript小数四舍五入多种方法实现
Dec 23 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
Feb 06 Javascript
调试代码导致IE出错的避免方法
Apr 04 Javascript
JavaScript获取指定元素位置的方法
Apr 08 Javascript
Node.js中的process.nextTick使用实例
Jun 25 Javascript
动态加载js、css的实例代码
May 26 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
Nov 20 Javascript
JavaScript 完成注册页面表单校验的实例
Aug 19 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
Sep 27 Javascript
vue component 中引入less文件报错 Module build failed
Apr 17 Javascript
原生JS封装vue Tab切换效果
Apr 28 Vue.js
高性能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
综合图片计数器
2006/10/09 PHP
PHP配置文件中最常用四个ini函数
2007/03/19 PHP
php echo()和print()、require()和include()函数区别说明
2010/03/27 PHP
PHP生成器简单实例
2015/05/13 PHP
PHP如何将log信息写入服务器中的log文件
2015/07/29 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
经常用到的JavasScript事件的翻译
2007/04/09 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
2016/01/27 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
2016/02/26 Javascript
详解Vuex管理登录状态
2017/11/13 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
2017/12/06 Javascript
微信小程序实现笑脸评分功能
2018/11/03 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
2019/04/24 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
2019/06/06 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
2020/07/22 Javascript
[01:44]剑指西雅图 展望TI之CIS战队专访
2014/06/25 DOTA
[51:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第二局
2016/03/03 DOTA
Python实例之wxpython中Frame使用方法
2014/06/09 Python
Python greenlet实现原理和使用示例
2014/09/24 Python
使用Python3中的gettext模块翻译Python源码以支持多语言
2015/03/31 Python
通过代码实例展示Python中列表生成式的用法
2015/03/31 Python
python实现猜数字小游戏
2020/03/24 Python
Python爬虫爬取新浪微博内容示例【基于代理IP】
2018/08/03 Python
Python实用工具FuckIt.py介绍
2019/07/02 Python
用Anaconda安装本地python包的方法及路径问题(图文)
2019/07/16 Python
python如何保证输入键入数字的方法
2019/08/23 Python
如何安装2019Pycharm最新版本(详细教程)
2019/09/26 Python
Python PyInstaller安装和使用教程详解
2020/01/08 Python
keras 指定程序在某块卡上训练实例
2020/06/22 Python
伦敦哈德森鞋:Hudson Shoes
2018/02/06 全球购物
总会计师岗位职责
2014/02/19 职场文书
服务标兵事迹材料
2014/05/04 职场文书
罚站检讨书
2015/01/29 职场文书
毕业论文答辩演讲稿
2015/06/23 职场文书
Linux中Nginx的防盗链和优化的实现代码
2021/06/20 Servers
漫画「处刑少女的生存之道」第3卷封面公开
2022/03/21 日漫