一个简单的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 相关文章推荐
firefox浏览器下javascript 拖动层效果与原理分析代码
Dec 04 Javascript
javascript 处理事件绑定的一些兼容写法
Dec 24 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
Aug 01 Javascript
JS加jquery简单实现标签元素的显示或隐藏
Sep 23 Javascript
node.js中的http.response.end方法使用说明
Dec 14 Javascript
JS仿Windows开机启动Loading进度条的方法
Feb 26 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
Mar 22 Javascript
Backbone.js框架中Model与Collection的使用实例
May 07 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
Sep 04 Javascript
JS实现水平移动与垂直移动动画
Dec 19 Javascript
详解Webpack抽离第三方类库以及common解决方案
Mar 30 Javascript
详解JavaScript之Array.reduce源码解读
Nov 01 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 explode()函数用法、切分字符串
2012/10/03 PHP
php提示Warning:mysql_fetch_array() expects的解决方法
2014/12/16 PHP
PHP中header用法小结
2016/05/23 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
laravel与thinkphp之间的区别与优缺点
2021/03/02 PHP
validator验证控件使用代码
2010/11/23 Javascript
jQuery学习笔记之DOM对象和jQuery对象
2010/12/22 Javascript
jquery选择器之内容过滤选择器详解
2014/01/27 Javascript
js输出阴历、阳历、年份、月份、周示例代码
2014/01/29 Javascript
在JavaScript中处理字符串之link()方法的使用
2015/06/08 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
2016/06/16 Javascript
老生常谈onBlur事件与onfocus事件(js)
2016/07/09 Javascript
一次$.getJSON不执行的简单记录
2016/07/19 Javascript
通过sails和阿里大于实现短信验证
2017/01/04 Javascript
微信小程序自定义对话框弹出和隐藏动画
2018/07/19 Javascript
微信小程序网络请求封装示例
2018/07/24 Javascript
WebSocket的简单介绍及应用
2019/05/23 Javascript
vue实现标签云效果的方法详解
2019/08/28 Javascript
关于JS解构的5种有趣用法
2019/09/05 Javascript
jQuery 隐藏/显示效果函数用法实例分析
2020/05/20 jQuery
理解Proxy及使用Proxy实现vue数据双向绑定操作
2020/07/18 Javascript
python如何实现反向迭代
2018/03/20 Python
Python开启线程,在函数中开线程的实例
2019/02/22 Python
python 基于opencv 实现一个鼠标绘图小程序
2020/12/11 Python
全球知名巧克力品牌:Godiva
2016/07/22 全球购物
会计与审计专业大专生求职信
2013/10/03 职场文书
公务员综合考察材料
2014/02/01 职场文书
元旦红领巾广播稿
2014/02/19 职场文书
美术教师岗位职责
2014/03/18 职场文书
公司寄语大全
2014/04/10 职场文书
电子商务求职信
2014/06/15 职场文书
融资合作协议书范本
2014/10/17 职场文书
2014年禁毒工作总结
2014/11/24 职场文书
小学教育见习总结
2015/06/23 职场文书
如何书写读后感?(附范文)
2019/07/26 职场文书
一篇文章告诉你如何实现Vue前端分页和后端分页
2022/02/18 Vue.js