一个简单的js渐显(fadeIn)渐隐(fadeOut)类

260 阅读 0 评论 172 点赞

我是靠谱客的博主坚强树叶，最近开发中收集的这篇文章主要介绍一个简单的js渐显(fadeIn)渐隐(fadeOut)类，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

要兼容IE(element.style.filter = 'alpha(opacity=value)')和非IE(element.style.opacity=value)就可以了。
另，还要注意，非IEopaciy的值是0~1之间，IE是1-100。

下面，贴代码：

复制代码代码如下:

 
/** 
* @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);//继续调用本身 
} 
} 
})(); 
} 
} 