以动画方式设置元素的透明度
设置元素的透明度非常的简单，具体可以参阅js动态设置元素透明度代码实例一章节。
但是上面的代码有点粗暴，很多时候我们需要一种动画方式的过渡设置。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
div {
margin: 0;
padding: 0;
}
.odiv {
width: 200px;
height: 200px;
background: #f00;
position: relative;
left: 0px;
top: 100px;
opacity: 0.3;
filter: alpha(opacity:30);
float: left;
margin: 10px;
}
</style>
<script language="javascript">
window.onload = function () {
var odiv = document.getElementsByTagName('div');
for (var index = 0; index < odiv.length; index++) {
(function () {
odiv[index].onmouseover = function () {
startOP(this, 100);
}
odiv[index].onmouseout = function () {
startOP(this, 30);
}
odiv[index].timer = null;
odiv[index].alpha = null;
})(index)
}
}
function startOP(obj, utarget) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var speed = 0;
if (obj.alpha > utarget) {
speed = -10;
}
else {
speed = 10;
}
obj.alpha = obj.alpha + speed;
if (obj.alpha == utarget) {
clearInterval(obj.timer);
}
obj.style.filter = 'alpha(opacity:' + obj.alpha + ')';
obj.style.opacity = parseInt(obj.alpha) / 100;
}, 30);
}
</script>
</head>
<body>
<div id="odiv" class="odiv"></div>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.window.onload = function () {}，当文档内容完全加载完毕再去执行函数中代码。
（2）.var odiv = document.getElementsByTagName('div')，的获取div元素集合。
（3）.for (var index = 0; index < odiv.length; index++) {}，遍历集合中的每一个元素。
（4）.(function () {
odiv[index].onmouseover = function () {
startOP(this, 100);
}
odiv[index].onmouseout = function () {
startOP(this, 30);
}
odiv[index].timer = null;
odiv[index].alpha = null;
})(index)，以闭包的方式为元素注册时间处理函数和为元素添加一些自定义属性。
（5）.function startOP(obj, utarget) {}，此函数实现了透明度动画效果，第一个参数是元素对象，第二个是透明度目标值。
（6）.clearInterval(obj.timer)，防止多个定时器函数叠加执行。
（7）.obj.timer = setInterval(function () {},30），每隔30毫秒执行一次匿名函数。
（8）.var speed = 0，声明一个变量并赋值为0，后面会用到。
（9）.if (obj.alpha > utarget) { speed = -10;
}
else {
speed = 10;
}，如果如果大于目标值，那么将speed设置为-10，否则设置为10，这个就是透明度变化的幅度。
（10）.obj.alpha = obj.alpha + speed，每次执行为obj.alpha值加上透明度变化值。
（11）.if (obj.alpha == utarget) {
clearInterval(obj.timer);
}，如果达到目标值，那么就停止定时器函数的执行。
（12）.obj.style.filter = 'alpha(opacity:' + obj.alpha + ')';
obj.style.opacity = parseInt(obj.alpha) / 100;
上面两个是为了兼容浏览器。
二.相关阅读:
（1）.onmouseover事件可以参阅javascript mouseover事件一章节。
（2）.onmouseout事件可以参阅javascript mouseout事件一章节。
（3）.clearInterval()可以参阅clearInterval()一章节。
（4）.setInterval()可以参阅setInterval()一章节。
（5）.闭包可以参阅javascript闭包概念介绍一章节。
（6）.兼容透明度可以参阅CSS如何设置div背景透明度且兼容性良好一章节。