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

 更新时间:2010年06月19日 17:20:30   作者:  
最近发现项目用的表单验证不好使,干脆一边参考人家的一边自己写了一个。在验证有错误返回提示信息用到渐显(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);//继续调用本身
}
}
})();
}
}

打包下载

相关文章

  • TypeScript入门之利用装饰器扩展代码能力

    TypeScript入门之利用装饰器扩展代码能力

    在 TypeScript 中,装饰器是一种特殊的声明,可以让你的代码更有趣、更灵活,下面小编就来带大家学习一下TypeScript中装饰器的具体使用吧
    2023-06-06
  • js让弹出新窗口居中显示的脚本

    js让弹出新窗口居中显示的脚本

    我们经常需要在新窗口弹出页面并需要居中显示
    2008-01-01
  • JS实现仿QQ效果的三级竖向菜单

    JS实现仿QQ效果的三级竖向菜单

    这篇文章主要介绍了JS实现仿QQ效果的三级竖向菜单,以实例形式分析了JavaScript遍历页面元素及动态改变页面css样式的技巧,需要的朋友可以参考下
    2015-09-09
  • 薪资那么高的Web前端必看书单

    薪资那么高的Web前端必看书单

    由于前端开发的火热和一些IT巨头公司 对 web前端开发人员的需求旺盛,让越来越多的人转入前端。今天就为大家分享了一份Web前端开发书单,希望大家喜欢
    2017-10-10
  • Javascript 获取滚动条位置等信息的函数

    Javascript 获取滚动条位置等信息的函数

    有时为了准确定位一个元素,我们需要获取滚动条的位置,这种需求经常出现在 tooltip 和 拖放等应用中,其实这个技术很简单,关键是要考虑浏览器的兼容性,本文就是介绍这一问题的解决方法。
    2009-09-09
  • 使用 JavaScript 制作页面效果

    使用 JavaScript 制作页面效果

    这篇文章主要介绍了使用 JavaScript 制作页面效果,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-04-04
  • 微信小程序和百度的语音识别接口详解

    微信小程序和百度的语音识别接口详解

    这篇文章主要介绍了微信小程序和百度的语音识别接口详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • JavaScript中的style.display属性操作

    JavaScript中的style.display属性操作

    今天为大家介绍的是JavaScript中的style.display属性操作实现代码与参数介绍
    2013-03-03
  • 动态加载js、css的实例代码

    动态加载js、css的实例代码

    这篇文章主要介绍了动态加载js、css的实例代码的相关资料,非常不错具有参考借鉴价值,感兴趣的朋友一起看看吧
    2016-05-05
  • JavaScript toDataURL图片转换问题解读

    JavaScript toDataURL图片转换问题解读

    这篇文章主要介绍了JavaScript toDataURL图片转换问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06

最新评论