一个简单的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 select下拉框操作常用方法
Nov 09 Javascript
jquery中获取id值方法小结
Sep 22 Javascript
jquery实现更改表格行顺序示例
Apr 30 Javascript
jQuery实现带滚动线条导航效果的方法
Jan 30 Javascript
详解WordPress开发中get_current_screen()函数的使用
Jan 11 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
Feb 16 Javascript
Google Maps基础及实例解析
Aug 06 Javascript
jQuery元素选择器实例代码
Feb 06 Javascript
node.js博客项目开发手记
Mar 16 Javascript
JavaScript函数apply()和call()用法与异同分析
Aug 10 Javascript
解决vue点击控制单个样式的问题
Sep 05 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
Apr 17 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获取url参数方法总结
2014/11/13 PHP
PHPStrom中实用的功能和快捷键大全
2015/09/23 PHP
Thinkphp自定义生成缩略图尺寸的方法
2019/08/05 PHP
javascript延时重复执行函数 lLoopRun.js
2007/06/29 Javascript
数组Array进行原型prototype扩展后带来的for in遍历问题
2010/02/07 Javascript
悬浮数字的实现案例
2014/02/19 Javascript
超棒的响应式布局jQuery插件Freetile.js
2014/11/17 Javascript
javascript 实现 原路返回
2015/01/21 Javascript
jQuery与getJson结合的用法实例
2015/08/07 Javascript
js 获取站点应用名的简单实例
2016/08/18 Javascript
值得分享的bootstrap table实例
2016/09/22 Javascript
JavaScript模仿Pinterest实现图片预加载功能
2016/10/25 Javascript
vue中用动态组件实现选项卡切换效果
2017/03/25 Javascript
BootStrap daterangepicker 双日历控件
2017/06/02 Javascript
Element-UI中Upload上传文件前端缓存处理示例
2019/02/21 Javascript
详解在Javascript中进行面向切面编程
2019/04/28 Javascript
node.js中npm包管理工具用法分析
2020/02/14 Javascript
基于html+css+js实现简易计算器代码实例
2020/02/28 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
2020/03/09 Javascript
Python牛刀小试密码爆破
2011/02/03 Python
python中使用enumerate函数遍历元素实例
2014/06/16 Python
python实现简单神经网络算法
2018/03/10 Python
Python从数据库读取大量数据批量写入文件的方法
2018/12/10 Python
Python中查看变量的类型内存地址所占字节的大小
2019/06/26 Python
Python Selenium 设置元素等待的三种方式
2020/03/18 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
python中adb有什么功能
2020/06/07 Python
Python常用数字处理基本操作汇总
2020/09/10 Python
浅谈Html5中视频 音频标签 进度条的问题
2016/07/26 HTML / CSS
前后端结合实现amazeUI分页效果
2020/08/21 HTML / CSS
Bally美国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/18 全球购物
数以千计的折扣工业产品:ESE Direct
2018/05/20 全球购物
Tom Dixon官网:英国照明及家具设计和制造公司
2019/03/01 全球购物
机械化及自动化毕业生的自我评价分享
2013/11/06 职场文书
幼儿师范毕业生自荐信
2013/11/09 职场文书
企业挂职心得体会
2014/09/10 职场文书