最近发现项目用的表单验证不好使,干脆一边参考人家的一边自己写了一个。在验证有错误返回提示信息用到渐显(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);//继续调用本身
}
}
})();
}
}
分享到:
相关推荐
fadein fadeout in unity游戏大作LOGO渐隐渐出的UNITY实现方法,看看更健康,看看更强大,旨在提高自身水平
moviepy音视频开发:audio_fadein、fadeout实现声音淡入淡出.rar
html5 jquery 实现DIV的fadeIn、fadeOut、fadeToggle淡入淡出渐变,点击出现淡出div元素、点击出现淡入div元素、点击出现颜色变淡、点击淡入或淡出。这种应用在网页前端开发中相当的普遍,有必要掌握,而且现在大...
HTML5 js DIV文字淡入淡出(fadein fadeout)效果,当鼠标放在DIV上的时候,该DIV的背景渐变淡入淡出,效果平滑,更像是Flash动画的效果,用HTML5实现类似的动画效果还是比较轻松的。
Delphi实现窗口的淡入淡出渐变fadein fadeout动画效果,除了渐变,还有其它的动画形式,比如从中心扩散、水平从左到右、水平从右到左、垂直从上到下、垂直从下到上等。本实例默认状态下是使用了淡入淡出渐变,其它...
主要介绍了通过原生js实现fadein 和 fadeout淡入淡出效果,需要的朋友可以参考下
[HTML][jQuery][中文]_11._淡入與淡出(fadeIn,_fadeOut)
本文实例讲述了JavaScript让网页出现渐隐渐显背景颜色的方法。分享给大家供大家参考。具体如下: <html> <head> <meta http-equiv=Content-Type content=text/html; charset=gb2312> <title&...
jQuery动画效果淡入浅出想必大家都有见到过吧,其实很很简单,通过fadeIn fadeOut方法便可轻松实现,具体如下,喜欢的朋友可以参考下,希望对大家有所帮助
主要介绍了jQuery中fadein与fadeout方法用法,结合实例形式分析了jQuery使用fadein与fadeout方法实现页面元素淡入淡出效果的相关技巧,需要的朋友可以参考下
input the sound file and it will perform the fade in, fade out and echo on that. it is a dsp project done on the matlab.
就想了想 jquery是怎么实现的呢,无奈,哥能力差,还不到研究jquery源码的时候。...slide && fadeIn && fadeIn && fadeOut [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]运行后,大家看效果。
VC仅用一个API实现的动画窗体_淡入淡出效果.rar
js图片轮播 很实用 有五种 渐进渐出 fadein fadeout
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏),需要的朋友可以参考一下
隐 . box { visibility : hidden; opacity : 0 ; transition : visibility 0 s 0.2 s , opacity 0.2 s ; } 动画片 淡入 . box { animation-name : fadeIn; animation-duration : 0.5 s ; } @keyframes fadeIn {...
jquery中有fadeIn和fadeOut两个效果,用来实现渐隐渐显的效果,这个在PC端自然是常用的效果。然后我们前端组的组员Mr Huang自然是想到手机页面也可以更加炫丽,于是加上了登录框的渐隐效果。给用户缓冲的效果不错。 ...