在本次实例中，由于一般主流的浏览器对于透明度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);