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

最近发现项目用的表单验证不好使，干脆一边参考人家的一边自己写了一个。在验证有错误返回提示信息用到渐显(fadeIn)渐隐(fadeOut)过渡(因为浏览器的效率实在太高了，一下就蹦了出来~~)；
主要是要兼容IE(element.style.filter = 'alpha(opacity=value)')和非IE(element.style.opacity=value)就可以了。
另，还要注意，非IEopaciy的值是0~1之间，IE是1-100。

 

下面，贴代码：

 

渐显(fadeIn)渐隐(fadeOut)

1 /* *
2 * @projectDescription 动画(渐显、渐隐)类
3 * /**
4 * @projectDescription KINGKIT UI
5 * @date 2010-6-1
6 * @author Kit.Liao
7 * @copyright kingkit.com.cn
8 * @version 0.9.0
9 * @感谢：http://www.cnblogs.com/rubylouvre/archive/2009/09/16/1566699.html
10 * 使用示例：渐显：KUI.Animation.fadeIn(el)；渐隐：KUI.Animation.fadeOut(el)
11 */
12 KUI.Animation = {
13 fadeIn: function (id){
14 this .fade(id, true );
15 },
16 fadeOut: function (id){
17 this .fade(id, false );
18 },
19 fade: function (id, flag){
20 var target = KUI.get(id);
21 target.alpha = flag ? 1 : 100 ;
22 target.style.opacity = (target.alpha / 100 );
23 target.style.filter = ' alpha(opacity= ' + target.alpha + ' ) ' ;
24 var value = target.alpha;
25 ( function (){
26 target.style.opacity = (value / 100 );
27 target.style.filter = ' alpha(opacity= ' + value + ' ) ' ;
28 if (flag) {
29 value ++ ;
30 if (value <= 100 ) {
31 setTimeout(arguments.callee, 15 ); // 继续调用本身
32   }
33 }
34 else {
35 value -- ;
36 if (value >= 0 ) {
37 setTimeout(arguments.callee, 15 ); // 继续调用本身
38   }
39 }
40 })();
41 }
42 }

 示例下载

转载于:https://www.cnblogs.com/kingkit/archive/2010/06/15/1758554.html