`
kingkit
  • 浏览: 39406 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

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

阅读更多
最近发现项目用的表单验证不好使,干脆一边参考人家的一边自己写了一个。在验证有错误返回提示信息用到渐显(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);//继续调用本身
            	}
			}
        })();
    }
}
分享到:
评论

相关推荐

    javascript经典特效---渐显文字效果.rar

    例如,使用`$(document).ready()`确保代码在页面加载完毕后执行,`fadeIn()`和`fadeOut()`函数可以轻松实现渐显和渐隐效果。 4. **动画效果**:在JavaScript中,可以使用`setInterval`或`setTimeout`创建定时器,...

    图像渐显效果的源代码资源

    - 使用JavaScript库,例如jQuery的`.fadeIn()`和`.fadeOut()`方法,可以轻松地实现图像的渐显和渐隐效果。 - 在Vue.js或React等现代前端框架中,可以通过状态管理控制组件的显示和隐藏,结合CSS动画实现渐显效果。...

    jquery渐隐渐现鼠标提示效果

    当鼠标移到元素上时,提示信息出现(渐显),当鼠标离开时,提示信息消失(渐隐): ```javascript $("#targetElement").mouseover(function() { $("#tooltip").fadeIn(); }).mouseout(function() { $("#tooltip...

    原生JS实现图片网格式渐显、渐隐效果

    在CSS中,可以定义关键帧动画,例如`@keyframes fadeout`和`fadein`,分别控制元素的透明度从1变化到0(渐隐)和从0变化到1(渐显)。在JavaScript中,可以动态修改元素的`animation`属性,包括动画的持续时间、延迟...

    纯js渐隐渐现图片切换效果

    在本文中,我们将深入探讨如何使用纯JavaScript实现一个简单的渐隐渐现图片切换效果,这是一种常见的图片轮播功能。这个效果通常用于网站的横幅或产品展示区域,以吸引用户的注意力并提供动态视觉体验。 首先,我们...

    用Javascript实现图片渐隐的效果

    在这个示例中,我们添加了一个名为`fadeButton`的按钮,并为其绑定了一个点击事件,根据当前图片的透明度决定执行渐隐还是渐显的动画。 以上就是使用JavaScript实现图片渐隐效果的基本步骤。在实际应用中,还可以...

    Jquery图片轮换渐淡渐显代码简单

    CSS中,我们定义一个类`hidden`来隐藏图片: ```css .hidden { display: none; } ``` 接下来,我们可以编写jQuery代码实现轮换: ```javascript $(document).ready(function() { var $images = $("#slideshow &gt;...

    javascript 图片渐隐效果

    这段代码会每50毫秒降低图片的透明度,当透明度降为0时,再将其重置回1,形成一个循环的渐隐渐显效果。 然而,jQuery提供了一个更简洁的API,`fadeIn()`和`fadeOut()`方法,用于实现动画效果,包括图片的渐隐渐现:...

    jQuery实现的渐隐渐显焦点图切换特效源码.zip

    在JavaScript中,我们可以使用`fadeIn()`和`fadeOut()`这两个jQuery方法来实现元素的渐显和渐隐。`fadeIn()`方法使元素逐渐变得可见,而`fadeOut()`则使其逐渐变得不可见。结合这两种方法,我们可以创建一个无缝的...

    jquery很不错的网页渐显效果

    jQuery提供了两个主要的方法来实现渐显效果:`.fadeIn()` 和 `.fadeOut()`。`.fadeIn()` 方法用于使元素逐渐变为可见,而`.fadeOut()`则用于使元素逐渐变为不可见。它们都可以接受三个参数:速度、回调函数和透明度...

    js渐隐渐现图片切换效果.zip

    jQuery的`.fadeIn()`和`.fadeOut()`方法可以轻松实现元素的渐显和渐隐效果。这些方法接受一个时间参数,定义动画的持续时间,让过渡更加平滑。 以下是一个简单的示例: ```html &lt;!DOCTYPE html&gt; 渐隐渐现图片...

    js模拟jquery的slide和fadeIn和fadeOut功能

    至于`fadeIn`和`fadeOut`,它们是用于控制元素的透明度,从而实现渐显和渐隐的效果。在jQuery中,这两个方法是通过改变元素的`opacity`属性实现的。在纯JavaScript中,我们可以使用CSS的`opacity`属性或者`rgba`颜色...

    jQuery左导航菜单二级菜单slide滑动渐隐显示-20130706

    标题中的“jQuery左导航菜单二级菜单slide滑动渐隐显示-20130706”指的是一个使用jQuery库创建的左侧导航菜单,该菜单具有二级子菜单,并且在展开和关闭时采用slide(滑动)效果以及渐隐渐现(fadeIn/fadeOut)效果...

    jquery导航菜单三级菜单slide滑动渐隐显示

    `slideDown()`和`slideUp()`控制下拉菜单的展开和折叠,而`fadeIn()`和`fadeOut()`则控制三级菜单的渐显和渐隐。 4. **优化**:为了提高性能和用户体验,我们还可以考虑添加一些额外的优化措施,如缓存jQuery对象,...

    jQuery图片渐隐切换菜单

    4. `js`文件夹:存放JavaScript代码,通常包括一个`script.js`文件。在这个文件中,我们需要编写jQuery代码来控制图片的切换。基本的逻辑是,当用户触发某个事件(如点击按钮或定时自动切换)时,改变当前显示图片的...

Global site tag (gtag.js) - Google Analytics