在开发的过程中，我们要做淡入淡出效果的话，我们完全可以使用jQuery的fadeTo()方法。但是我们的目的不只是会用，而是理解程序底层的逻辑。这篇文章主要就是利用原生的javascript实现淡入淡出的效果。
构建框架，基本没难度。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>透明度函数的封装</title> <style type="text/css"> #box{ width: 200px; height: 200px; background: red; margin: 50px auto; opacity: .3; filter: alpha(opacity:30); } </style> </head> <body> <div id="box"></div> <script src="toumingdu.js" type="text/javascript" charset="utf-8"></script> </body> </html> 编写javascript部分，主要难点是changeOpacity()函数。
window.onload = function (){ var box = document.getElementById('box'); box.onmouseover = function (){ changeOpacity(this,100); } box.onmouseout = function (){ changeOpacity(this,30); } } /** * * @param {Object} box 要变化透明度的元素 * @param {Object} target 透明度的目标值（100为最高） */ function changeOpacity(box,target){ var opa; var speed; if(box.currentStyle){ //判断浏览器类型，此类型为IE浏览器，即使IE不支持opacity属性，但是仍然可以获取值 opa = box.currentStyle['opacity']*100; } else{//其他浏览器 opa = getComputedStyle(box,false)['opacity']*100; } //透明度每次变化的值（步长），根据目标值和当前值的差来决定步长的正负 target-opa>=0?speed=1:speed=-1; clearInterval(box.timer); box.timer = setInterval(function (){ //目标值和当前值差值的绝对值大于等于步长的绝对值，设置透明度为当前值加步长 if(Math.abs(target-opa)>=Math.abs(speed)){ box.style.opacity=(opa+speed)/100; box.style.filter='alpha(opacity:'+(opa+speed)+')'; } //目标值和当前值差值的绝对值小于步长的绝对值，剩余的距离一步到位， //设置透明度直接为目标值，同时清除定时器 else{ box.style.opacity=target/100; box.style.filter='alpha(opacity:'+target+')'; clearInterval(box.timer); } //直接对透明度参数进行加步长的运算，避免每次都要获取当前透明度 opa=opa+speed; },30); } 这个透明度函数的原理在大体上是跟运动函数相同的。总结为三步：
1、获取当前值，根据目标值和当前值确定步长；
2、变化的过程，每次变化一个值（渐变动画和透明度其步长为不同的值，而匀速动画和透明度步长为定值）；
3、判断是否达到目标值，达到则清除定时器，结束。
所以如果原理弄不清楚可以看一下另一篇文章javascript匀速动画和缓冲动画。
新闻热点
疑难解答
图片精选
