在開發的過程中，我們要做淡入淡出效果的話，我們完全可以使用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值）。那麼下面不就和動畫那個問題一樣了？
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。