1、透明度的样式设置：
透明度在IE浏览器和其他相关浏览器中的设置方法不太相同，IE使用filter：alpha属性，firefox使用opactiy属性；
filter:alpha(opacity:30);
opacity:0.3;
2、原生js设置透明度
为了兼容IE与其他浏览器对透明度的设置，代码如下：
var alpha=30;
var mydiv=document.getElementById("myDiv");
mydiv.style.filter="alpha(opacity:"+alpha+")";
mydiv.style.opacity=alpha/100;
3、jQuery设置透明度
jQuery中对透明度的设置进行了整合，兼容IE和其他浏览器，修改opactiy属性值即可，值为小数，因此只需要设置一次即可；
代码如下:
$(function(){
$("#div1").css("opacity","0.3"); //设置透明度
});
4、举例：鼠标移入，透明度变小；鼠标移出，恢复。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js透明度动画</title> <style type="text/css"> *{margin:0;padding:0;} div{ width:200px; height:200px; background-color:#f00; filter:alpha(opacity:100);/*IE浏览器*/ opacity:1;/*Firefox浏览器*/ } </style> <script> window.onload=function(){ var mydiv=document.getElementById("myDiv"); mydiv.onmouseover=function(){//鼠标移入 startMove(30); } mydiv.onmouseout=function(){//鼠标移出 startMove(100); } } var timer=null; var alpha=30;//透明度值变量 function startMove(iTarget){ var speed=0; var mydiv=document.getElementById("myDiv"); clearInterval(timer); timer=setInterval(function(){ if(alpha>iTarget){ speed= -10; }else{ speed= 10; } if(iTarget==alpha){ clearInterval(timer); }else{ alpha+=speed; mydiv.style.filter="alpha(opacity:"+alpha+")";//设置IE透明度 mydiv.style.opacity=alpha/100;//设置Firefox透明度，值为小数，其实可以写成alpha*0.01 } },50); } </script> </head> <body> <div id="myDiv"></div> </body> </html>