一个简单的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实现分割提取页面所需内容
May 09 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
Apr 12 Javascript
使用简洁的jQuery方法实现隔行换色功能
Jan 02 Javascript
DOM基础教程之事件类型
Jan 20 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
Dec 02 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
Jan 28 Javascript
JS中artdialog弹出框控件之提交表单思路详解
Apr 18 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
Sep 01 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
Sep 04 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
Oct 16 Javascript
原生JS实现无缝轮播图片
Jun 24 Javascript
如何在vue中使用HTML 5 拖放API
Jan 14 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
PHP中通过ADO调用Access数据库的方法测试不通过
2006/12/31 PHP
PHP 写文本日志实现代码
2010/05/18 PHP
PHP 数据结构 算法描述 冒泡排序 bubble sort
2011/07/10 PHP
微信公众号开发之微信公共平台消息回复类实例
2014/11/14 PHP
CodeIgniter框架钩子机制实现方法【hooks类】
2018/08/21 PHP
PHP正则表达式处理函数(PCRE 函数)实例小结
2019/05/09 PHP
JS的replace方法介绍
2012/10/20 Javascript
拖动table标题实现改变td的大小(css+js代码)
2013/04/16 Javascript
不要使用jQuery触发原生事件的方法
2014/03/03 Javascript
node.js中的fs.realpath方法使用说明
2014/12/16 Javascript
Vue.js组件tabs实现选项卡切换效果
2016/12/01 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
2017/01/10 Javascript
基于vue开发的在线付费课程应用过程
2018/01/25 Javascript
vue使用xe-utils函数库的具体方法
2018/03/06 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
2018/08/14 Javascript
在vue中使用echarts图表实例代码详解
2018/10/22 Javascript
深入理解javascript prototype的相关知识
2019/09/19 Javascript
js get和post请求实现代码解析
2020/02/06 Javascript
JavaScript中this函数使用实例解析
2020/02/21 Javascript
iview实现图片上传功能
2020/06/29 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
2020/07/29 Javascript
老生常谈Python序列化和反序列化
2017/06/28 Python
python绘制圆柱体的方法
2018/07/02 Python
Python3.7中安装openCV库的方法
2018/07/11 Python
Django 路由层URLconf的实现
2019/12/30 Python
将labelme格式数据转化为标准的coco数据集格式方式
2020/02/17 Python
python使用布隆过滤器的实现示例
2020/08/20 Python
CSS3教程(5):网页背景图片
2009/04/02 HTML / CSS
如果一个类实现了多个接口但是这些接口有相同的方法名将会怎样
2013/06/16 面试题
员工自我鉴定
2013/10/09 职场文书
如何写一封打动人心的求职信
2014/02/17 职场文书
讲文明树新风公益广告宣传方案
2014/02/25 职场文书
成绩单公证书
2014/04/10 职场文书
2015年学习部工作总结范文
2015/03/31 职场文书
元旦晚会开场白
2015/05/29 职场文书
centos7安装mysql5.7经验记录
2022/05/02 Servers