一个简单的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 }

 示例下载

posted @ 2010-06-15 11:39  kingkit  阅读(2712)  评论(2编辑  收藏