一个简单的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 相关文章推荐
商城常用滚动的焦点图效果代码简单实用
Mar 28 Javascript
JS中的form.submit()不能提交表单的错误原因
Oct 08 Javascript
jqGrid表格应用之新增与删除数据附源码下载
Dec 02 Javascript
jQuery+CSS实现简单切换菜单示例
Jul 27 Javascript
jQuery轮播图效果精简版完整示例
Sep 04 Javascript
angularjs项目的页面跳转如何实现(5种方法)
May 25 Javascript
利用javascript如何随机生成一定位数的密码
Sep 22 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
Dec 19 Javascript
解决vue-cli webpack打包后加载资源的路径问题
Sep 25 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
Nov 23 Javascript
JS校验与最终登陆界面功能完整示例
Jan 13 Javascript
JS实现简易图片自动轮播
Oct 16 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
PHP5/ZendEngine2的改进
2006/10/09 PHP
一个PHP验证码类代码分享(已封装成类)
2011/07/17 PHP
基于Zend的Captcha机制的应用
2013/05/02 PHP
解析dedeCMS验证码的实现代码
2013/06/07 PHP
使用PHP把HTML生成PDF文件的几个开源项目介绍
2014/11/17 PHP
php技术实现加载字体并保存成图片
2015/07/27 PHP
PHP扩展迁移为PHP7扩展兼容性问题记录
2016/02/15 PHP
PHP互换两个变量值的方法(不用第三变量)
2016/11/14 PHP
ThinkPHP下表单令牌错误与解决方法分析
2017/05/20 PHP
javascript 尚未实现错误解决办法
2008/11/27 Javascript
用jquery实现学校的校历(asp.net+jquery ui 1.72)
2010/01/01 Javascript
jquery一句话全选/取消全选
2011/03/01 Javascript
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
Bootstrap每天必学之导航条(二)
2016/03/01 Javascript
AngularJS入门教程之AngularJS模型
2016/04/18 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
2016/06/16 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
2016/06/21 Javascript
js判断出两个字符串最大子串的函数实现方法
2016/11/01 Javascript
Node.js连接mongodb实例代码
2017/06/06 Javascript
jqgrid实现简单的单行编辑功能
2017/09/30 Javascript
Vue2.0父子组件传递函数的教程详解
2017/10/16 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
2018/04/17 Javascript
Webpack path与publicPath的区别详解
2018/05/03 Javascript
JavaScript实现简单音乐播放器
2020/04/17 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
2019/02/10 Javascript
Node 代理访问的实现
2019/09/19 Javascript
JavaScript多种滤镜算法实现代码实例
2019/12/10 Javascript
pyqt5简介及安装方法介绍
2018/01/31 Python
python实现屏保计时器的示例代码
2018/08/08 Python
快速实现一个简单的canvas迷宫游戏的示例
2018/07/04 HTML / CSS
HTML5 drag和drop具体使用详解
2021/01/18 HTML / CSS
数学教育专业求职信
2014/07/22 职场文书
大学生见习总结报告
2015/06/24 职场文书
2015年度对口支援工作总结
2015/07/22 职场文书
2016党员入党决心书
2015/09/22 职场文书
Pytorch 统计模型参数量的操作 param.numel()
2021/05/13 Python