在開發的過程中，我們要做淡入淡出效果的話，我們完全可以使用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勻速動畫和緩衝動畫。
而在理解原理的情況下最大的困難應該是當前透明度的獲取了（賦值比較簡單）。取得透明度的值我們要考慮兩種情況：
1、IE，雖然在在IE下不支援opacity屬性，但是我們是可以透過box.currentStyle['opacity']取得到它的值的，同時我們在寫入的時候也會將給opacity的值寫入css中，儘管IE不會因為opacity值的改變而改變透明度。
2、其他瀏覽器，其他瀏覽器是支援opacity屬性，所以我們操作相對簡單了許多，寫入和讀取都針對opacity即可。
接下來細講在IE瀏覽器中的操作：
首先我們的css檔案中有兩個屬性值在我們的操作中是有用的 opacity: .3; filter: alpha(opacity:30);顯然我們很難取得filter屬性中的opacity值（我不會！），但如果我們使用currentStyle來取得opacity是比較簡單的。所以我進行了測試發現，儘管IE不支援這個屬性，但是這個屬性值的讀取和寫入時完全沒問題的，所以，問題就迎刃而解了！我們透過opacity可以讀取當前透明度，然後透過filter改變透明度，同時，我們改變opacity的值（不僅是為了相容於其他瀏覽器，同時我們寫入以後IE瀏覽器中在下次移入的時候還可以獲得當前的透明度，否則的話獲取的是初始的opacity值）。那麼下面不就跟動畫那個問題一樣了？
