模仿jquery的fadeIn、fadeOut、fadeToogle、fadeTo函数，淡入淡出效果挺不错！

需要用到自己之前写的animate函数


<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=GBK"></head><body><div onclick="do_fadeOut()" id="div" style="width:70px;height:50px;background:skyblue;left:25%;"><p>div</p></div><div  id="div1" style="width:70px;height:50px;background:red;display:none;"><p>div1</p></div><button onclick="do_fadeOut()">fadeToggle Div</button><button onclick="do_fadeIn()">fadeToggle Div1</button><button onclick="do_fadeToggle()">fadeToggle Div</button><button onclick="do_fadeTo()">fadeTo Div</button></body>
<script>
/*obj:dom对象prop:动画参数speed:执行速度 fast slow 3000等func:回调函数
*/
function animate(obj,prop,speed,func){//防止重复动画事件if(obj.timer) return ;//定义定时器执行次数和总执行时间var  limit=10,totalTime; if(typeof speed==='number'){//如果传入的是totalTime = speed;}else if(speed==='slow'){totalTime = 600;}else if(speed==='fast'){totalTime = 200;}else{totalTime = 400;}var time = totalTime/limit;//获取属性值function getStyle(obj, prop) {var prevComputedStyle = document.defaultView ? document.defaultView.getComputedStyle( obj, null ) : obj.currentStyle;return prevComputedStyle[prop];}var n=0,cache={},display,primary_cur;//cache用来缓存，省的每次都去dom获取obj.timer = setInterval(function(){n++;//执行次数每次递增for(var p in prop){if("display"===p) {display = prop["display"];if(display!=='none'){obj.style['display'] = display;}delete prop["display"];continue;}//判断是否是可以递增的属性，如果不是则直接让它生效，并从prop中删除，删除后就不用每次任务都执行它var reg = /^(\d)+(px$)?/;//数字和像素这样的判定为可以递增的属性if(!reg.test(prop[p])){obj.style[p] = prop[p];delete prop[p];continue;}var value,opacityFlag=(p == "opacity")?true:false;var cur = 0;if(cache[p+"_cur"]){//从缓存中取cur = cache[p+"_cur"];value = cache[p+"_value"];}else{value = prop[p];if(opacityFlag) {//如果本来是隐藏的则cur默认就是0if(getStyle(obj, 'display')!=='none'){cur = Math.round(parseFloat(getStyle(obj, p)) * 100);}} else {cur = parseInt(getStyle(obj, p));//处理100px的格式(typeof value==='string') && (value=value.replace(/px$/,""));}primary_cur=cur;cache[p+"_value"] = value;}var incre ;if(cache[p+'_increment']){//如果缓存中有则从中取incre = cache[p+'_increment'];}else{if(opacityFlag){incre = (value*100-cur)/limit;//计算每次变化值}else{incre = (value-cur)/limit;//计算每次变化值}cache[p+'_increment']= incre;}//缓存起来，这样就不用每次都去dom中获取了。cache[p+"_cur"] = cur + incre;if (opacityFlag) {//obj.style.filter = "alpha(opacity : '+(cur + incre)+' )";obj.style.opacity = (cur + incre)/100 ;}else {obj.style[p] = cur + incre + "px";}}//如果达到了最大执行次数，要清除定时器，并执行回调函数if(n==limit){if(display==='none'){obj.style['display'] = 'none';}//清除定时器clearInterval(obj.timer);obj.timer=undefined;func();}},time)}
var div = document.getElementById("div");
var div1 = document.getElementById("div1");/*function do_animate(){animate(div,{width:'400px',height:400,opacity: 0,background:'red'},2000,function(){console.log('finished')
});
}*//*obj:dom对象speed:执行速度 fast slow 3000等func:回调函数
*/function fadeOut(obj,speed,func){animate(obj,{opacity: 0,display:'none'},speed,func);
}function fadeIn(obj,speed,func){animate(obj,{opacity: 1,display:'block'},speed,func);
}function fadeToggle(obj,speed,func){if(obj.style.display==='none'){fadeIn(obj,speed,func);}else{fadeOut(obj,speed,func);}
}
function fadeTo(obj,speed,opacity,func){if(opacity>0 && obj.style.display==='none'){animate(obj,{opacity: opacity,display:'block'},speed,func);}else{animate(obj,{opacity: opacity},speed,func);}
}//执行隐藏
function do_fadeOut(){fadeOut(div,1000,function(){console.log('fadeOut_finished')})
}//执行显示
function do_fadeIn(){fadeIn(div1,2000,function(){console.log('fadeIn_finished')})
}function do_fadeToggle(){fadeToggle(div,1000,function(){console.log('fadeToggle_finished')})
}function do_fadeTo(){fadeTo(div,"slow",0.15,function(){console.log('fadeTo_finished')});
}</script>
</html>

模仿jquery的fadeIn、fadeOut、fadeToogle、fadeTo函数，淡入淡出效果挺不错！相关推荐

jQuery淡入淡出fadeIn() fadeOut() fadeToggle() fadeTo()
通过 jQuery,您可以实现元素的淡入淡出效果. jQuery 拥有下面四种 fade 方法: fadeIn() fadeOut() fadeToggle() fadeTo() 1,jQuery f ...
原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)
淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透 ...
jQuery 实现淡入淡出效果
上一节我们学习了如何实现元素的显示与隐藏,本节我们来学习如何实现元素的淡入淡出效果. fadeIn()方法 fadeIn() 方法用于淡入已隐藏的元素. 语法如下所示: $(selector).fad ...
html淡化效果,jQuery实现基本淡入淡出效果的方法详解
本文实例讲述了jQuery实现基本淡入淡出效果的方法.分享给大家供大家参考,具体如下: jQuery fadeIn()方法:用于淡入已隐藏的元素 jQuery fadeOut()方法:用于淡出可见的元 ...
jquery淡入淡出效果及突出显示案例
fadeToggle方法可以动态地让淡入淡出相互切换 fadeTO方法淡入淡出到指定透明度使用fadeTo方法让元素透明度淡入到0时,这个元素还是会保留原有位置的宽和高,只不过是透明度透明了而已从 ...
JQuery:多张图片的淡入淡出效果。
我们要实现一个这样子的一个动画:多张图片在相同的位置淡入淡出,实现图片的轮流展示.具体实现的思路: 使用定时器setInterval方法,setInterval(<要调用的方法>,时间延时 ...
html实现新闻滚动效果,jQuery实现新闻播报滚动及淡入淡出效果示例
这篇文章主要介绍了jQuery实现新闻播报滚动及淡入淡出效果,结合实例形式分析了基于jQuery插件的页面元素动态变换相关操作技巧,需要的朋友可以参考下本文实例讲述了jQuery实现新闻播报滚动及淡 ...
利用API函数实现图像淡入淡出效果(VB)
利用API函数实现图像淡入淡出效果一般传统的实现两个PictureBox之间图像的淡入淡出效果都需要使用大量的API函数并进行复杂的调色板以及绘图设备(Device Context)的操作 ...
利用API函数实现图像淡入淡出效果 (转)
利用API函数实现图像淡入淡出效果 (转)[@more@]利用 api 函数实现图像淡入淡出效果一般传统的实现两个PictureBox之间图像的淡入淡出效果都需要使用大量的API函数并进行复杂的调色 ...

模仿jquery的fadeIn、fadeOut、fadeToogle、fadeTo函数，淡入淡出效果挺不错！

需要用到自己之前写的animate函数

模仿jquery的fadeIn、fadeOut、fadeToogle、fadeTo函数，淡入淡出效果挺不错！相关推荐

最新文章

热门文章