直接使用jQuery设置CSS透明度更直观更容易实现,因为在所有浏览器代码都一样,并且你不必担心在IE下元素是否“haslayout”:
Example Source Code
$("#myElement").css({ opacity: .4 }); // 所有浏览器有效
您也可以使用一下jQuery代码使一个元素动画透明:
$("#myElement").animate({ opacity: .4 }, 1000, function() {
// 动画完成,所有浏览器下有效 });
不管元素的透明度在动画开始时是多少,它都会渐变到透明度为“.4”。动画的速度通过值“1000”设定,动画时间以毫秒为单位。代码中的最后一个属性是一个可选回调函数,将在动画完成后执行。
如果该元素的透明度在CSS中已经设定为“.4”,那在动画运行的时候,你将不会发觉有任何不同,所以动画开始和最终透明度要有所不同。
六、通过RGBA的透明度
另一个CSS3技术只支持部分新的浏览器(Firefox 3+, Opera 10.1+, Chrome 2+,Safari 3.1+),可通过RGBA的alpha通道的方式设定。语法如下:
Example Source Code
#rgba { background: rgba(98, 135, 167, .4); }
在上面的定义中,通过RGB(前三个数字)给背景设定颜色,然后最后一个是alpha设置,以执行给定颜色的透明度。这个alpha设置跟opacity 属性一样,可设定任何0到1的数字,精确得到两位小数点。数字