javascript淡入淡出效果代码实例
使用jQuery实现淡入淡出效果非常的简单，具体可以参与一下两篇文章:
（1）.淡入效果可以参阅jQuery fadeIn()一章节。
（2）.淡出效果可以参阅jQuery fadeOut()一章节。
下面就通过代码实例介绍一下如何使用原生javascript介绍一下如何实现此功能。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
#demo div.box {
float:left;
width:31%;
margin:0 1%;
}
#demo div.box h2{
margin-bottom:10px;
}
#demo div.box h2 input{
padding:5px 8px;
font-size:14px;
font-weight:bolder;
}
#demo div.box div {
text-indent:10px;
line-height:22px;
border:2px solid #555;
padding:0.5em;
overflow:hidden;
}
</style>
<script>
window.onload = function () {
var iBase = {
Id: function (name) {
return document.getElementById(name);
},
SetOpacity: function (ev, v) {
ev.filters ? ev.style.filter = 'alpha(opacity=' + v + ')' : ev.style.opacity = v / 100;
}
}
function fadeIn(elem, speed, opacity) {
speed = speed || 20;
opacity = opacity || 100;
elem.style.display = 'block';
iBase.SetOpacity(elem, 0);
var val = 0;
(function () {
iBase.SetOpacity(elem, val);
val += 5;
if (val <= opacity) {
setTimeout(arguments.callee, speed)
}
})();
}
function fadeOut(elem, speed, opacity) {
speed = speed || 20;
opacity = opacity || 0;
var val = 100;
(function () {
iBase.SetOpacity(elem, val);
val -= 5;
if (val >= opacity) {
setTimeout(arguments.callee, speed);
}
else if (val < 0) {
elem.style.display = "none";
}
})();
}
var btns = iBase.Id("demo").getElementsByTagName("input");
btns[0].onclick = function () {
fadeIn(iBase.Id("fadeIn"));
}
btns[1].onclick = function () {
fadeOut(iBase.Id("fadeOut"), 40);
}
btns[2].onclick = function () {
fadeOut(iBase.Id("fadeTo"), 20, 10);
}
}
</script>
</head>
<body>
<div id="demo">
<div class="box">
<h2><input type="button" value="点击淡入"/></h2>
<div id="fadeIn" style="display:none">
<p>前端教程网</p>
</div>
</div>
<div class="box">
<h2><input type="button" value="点击淡出"/></h2>
<div id="fadeOut">
<p>前端教程网</p>
</div>
</div>
<div class="box">
<h2><input type="button" value="点击淡出至指定透明度"/></h2>
<div id="fadeTo">
<p>前端教程网</p>
</div>
</div>
</div>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.window.onload = function () {},当文档内容完全加载再去执行函数中的代码。
（2）.var iBase = {
Id: function (name) {
return document.getElementById(name);
},
SetOpacity: function (ev, v) {
ev.filters ? ev.style.filter = 'alpha(opacity=' + v + ')' : ev.style.opacity = v / 100;
}
}，封装了两个方法，第一个是功能是获取指定id元素对象。
第二个的功能是实现兼容所有浏览器的元素透明度设置。
（3）.function fadeIn(elem, speed, opacity) {}，实现元素的淡入效果，第一个参数规定要淡入的元素对象。
第二个参数规定淡入的速度（其实是定时器函数的时间间隔）。
第三个参数规定目标透明度值。
（4）.speed = speed || 20，如果传递了speed参数，那么就采用传递的值，否则使用默认值20。
（5）.opacity = opacity || 100，如果传递了opacity参数，那么就采用传递的值，否则使用默认的值100。
（6）.elem.style.display = 'block'，设置元素为显示状态。
（7）.iBase.SetOpacity(elem, 0),然后先将透明度设置为0。
（8）.var val = 0,声明一个变量并赋初值为0。
（9）.(function () {})()，匿名自执行函数。
（10）.iBase.SetOpacity(elem, val)，设置元素的透明度。
（11）.val += 5，val值加5。
（12）.if (val <= opacity) {
setTimeout(arguments.callee, speed)
},如果val值小于等于目标opacity值，那么递归调用匿名函数。
二.相关阅读:
（1）.js设置透明度可以参阅兼容所有浏览器js设置元素透明度效果一章节。
（2）.setTimeout()可以参阅setTimeout()一章节。