在本次实例中，由于一般主流的浏览器对于透明度opacity最大值为1，但是在IE6最大值是100，此次例子是按主流浏览器的透明度来算的，所以定义的是小数，也可以定义为整数为单位，在运算的时候遇到主流的浏览器除以100就可以了。
实例：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>透明度动画</title>
<style>
body,div{
margin:0;
padding:0;
}
.opacity_move{
height:200px;
width:200px;
background:#936;
opacity:0.3;
}
</style>
<script>
window.onload = function (){
var div = document.getElementById('opacity_move');
div.onmouseover = function (){
opacity_move(0.1, 1);
}
div.onmouseout = function (){
opacity_move(-0.1, 0.3);
}
}
var timer = null;
var opacity = 0.3;
function opacity_move(speed, target){
var div = document.getElementById('opacity_move');
clearInterval(timer);
timer = setInterval(function(){
if(opacity.toFixed(1) == target){//浮点数之间的运算存在误差，会有很多位的小数，所以在判断是否等于一时需要四舍五入来计算，并且保留一位小数。
clearInterval(timer);
}
else{
opacity += speed;
div.style.filter = 'alpha(opacity:' + opacity + ')';
div.style.opacity = opacity;
}
}, 500);
}
</script>
</head> <body>
<div id="opacity_move" class="opacity_move"></div>
</body>
</html>
动画总结：
1.先设置一个定时器；
var timer = null;
2.清空定时器；
clrarInterval(timer);
3.打开定时器，并写功能；
timer = setInterval(function(){
/*功能*/
},1000);
4.判断相应条件关闭定时器。
timer = setInterval(function(){
if(/*条件*/){
clrarInterval(timer);
}
else{
/*功能*/
}
},1000);