一个简单的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);//继续调用本身
}
}
})();
}
}
打包下载
另，还要注意，非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);//继续调用本身
}
}
})();
}
}
打包下载
相关文章
这篇文章主要介绍了JS实现自动切换文字的导航效果代码,涉及javascript动态切换页面样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
JavaScript作为一门解释执行的脚本语言,其变量作用域与传统编译型语言有着明显的区别,本文将详细介绍JavaScript中变量的作用域规则,以及利用闭包实现的常见作用域应用场景,帮助读者进一步掌握JavaScript编程,感兴趣的朋友跟随小编一起看看吧2024-01-01
javascript中replace()在javascript中，String的函数replace()简直太让人喜爱了。它灵活而强大的字符替换处理能力，让我不禁想向大家介绍它。2008-11-11
这篇文章主要介绍了微信打开网址添加在浏览器中打开提示的办法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要介绍了javascript的tab切换原理与效果实现方法,实例分析了简单的tab切换实现技巧,非常具有实用价值,需要的朋友可以参考下2015-01-01
javascript实现数组内值索引随机化及创建随机数组的方法
这篇文章主要介绍了javascript实现数组内值索引随机化及创建随机数组的方法,涉及javascript数组索引及随机数的相关实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
这篇文章主要给大家介绍了关于如何解决前端调用后端接口时的超时问题,还详细介绍了在Vue项目中配置axios的全局超时时间、使用递归和Promise.race()处理异步请求超时的最佳实践,需要的朋友可以参考下2024-12-12
这篇文章主要介绍了js实现正则匹配中文标点符号的方法,涉及JavaScript正则匹配与判定的简单使用技巧,需要的朋友可以参考下2015-12-12
鉴于UI妹妹每次交付过来的选项卡都夹带了多多少少的js，而且每遇到选项卡就加一点js，造成垃圾低劣代码逐渐堆积过多了，一直想做一个通用简洁的选项卡库。2010-05-05
这篇文章主要介绍了小程序接口的promise化的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
最新评论