最近发现项目用的表单验证不好使,干脆一边参考人家的一边自己写了一个。在验证有错误返回提示信息用到渐显(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);//继续调用本身
}
}
})();
}
}
分享到:
相关推荐
例如,使用`$(document).ready()`确保代码在页面加载完毕后执行,`fadeIn()`和`fadeOut()`函数可以轻松实现渐显和渐隐效果。 4. **动画效果**:在JavaScript中,可以使用`setInterval`或`setTimeout`创建定时器,...
- 使用JavaScript库,例如jQuery的`.fadeIn()`和`.fadeOut()`方法,可以轻松地实现图像的渐显和渐隐效果。 - 在Vue.js或React等现代前端框架中,可以通过状态管理控制组件的显示和隐藏,结合CSS动画实现渐显效果。...
当鼠标移到元素上时,提示信息出现(渐显),当鼠标离开时,提示信息消失(渐隐): ```javascript $("#targetElement").mouseover(function() { $("#tooltip").fadeIn(); }).mouseout(function() { $("#tooltip...
在CSS中,可以定义关键帧动画,例如`@keyframes fadeout`和`fadein`,分别控制元素的透明度从1变化到0(渐隐)和从0变化到1(渐显)。在JavaScript中,可以动态修改元素的`animation`属性,包括动画的持续时间、延迟...
在本文中,我们将深入探讨如何使用纯JavaScript实现一个简单的渐隐渐现图片切换效果,这是一种常见的图片轮播功能。这个效果通常用于网站的横幅或产品展示区域,以吸引用户的注意力并提供动态视觉体验。 首先,我们...
在这个示例中,我们添加了一个名为`fadeButton`的按钮,并为其绑定了一个点击事件,根据当前图片的透明度决定执行渐隐还是渐显的动画。 以上就是使用JavaScript实现图片渐隐效果的基本步骤。在实际应用中,还可以...
CSS中,我们定义一个类`hidden`来隐藏图片: ```css .hidden { display: none; } ``` 接下来,我们可以编写jQuery代码实现轮换: ```javascript $(document).ready(function() { var $images = $("#slideshow >...
这段代码会每50毫秒降低图片的透明度,当透明度降为0时,再将其重置回1,形成一个循环的渐隐渐显效果。 然而,jQuery提供了一个更简洁的API,`fadeIn()`和`fadeOut()`方法,用于实现动画效果,包括图片的渐隐渐现:...
在JavaScript中,我们可以使用`fadeIn()`和`fadeOut()`这两个jQuery方法来实现元素的渐显和渐隐。`fadeIn()`方法使元素逐渐变得可见,而`fadeOut()`则使其逐渐变得不可见。结合这两种方法,我们可以创建一个无缝的...
jQuery提供了两个主要的方法来实现渐显效果:`.fadeIn()` 和 `.fadeOut()`。`.fadeIn()` 方法用于使元素逐渐变为可见,而`.fadeOut()`则用于使元素逐渐变为不可见。它们都可以接受三个参数:速度、回调函数和透明度...
jQuery的`.fadeIn()`和`.fadeOut()`方法可以轻松实现元素的渐显和渐隐效果。这些方法接受一个时间参数,定义动画的持续时间,让过渡更加平滑。 以下是一个简单的示例: ```html <!DOCTYPE html> 渐隐渐现图片...
至于`fadeIn`和`fadeOut`,它们是用于控制元素的透明度,从而实现渐显和渐隐的效果。在jQuery中,这两个方法是通过改变元素的`opacity`属性实现的。在纯JavaScript中,我们可以使用CSS的`opacity`属性或者`rgba`颜色...
标题中的“jQuery左导航菜单二级菜单slide滑动渐隐显示-20130706”指的是一个使用jQuery库创建的左侧导航菜单,该菜单具有二级子菜单,并且在展开和关闭时采用slide(滑动)效果以及渐隐渐现(fadeIn/fadeOut)效果...
`slideDown()`和`slideUp()`控制下拉菜单的展开和折叠,而`fadeIn()`和`fadeOut()`则控制三级菜单的渐显和渐隐。 4. **优化**:为了提高性能和用户体验,我们还可以考虑添加一些额外的优化措施,如缓存jQuery对象,...
4. `js`文件夹:存放JavaScript代码,通常包括一个`script.js`文件。在这个文件中,我们需要编写jQuery代码来控制图片的切换。基本的逻辑是,当用户触发某个事件(如点击按钮或定时自动切换)时,改变当前显示图片的...