自己親手做的，很基礎吧！雖然很亂的樣子，沒辦法，技術有限，只能做到這一步了。
貼上代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="fade-obj" style="width: 300px; height: 300px; background: #000"></div>
<button id="fade-btn">淡出</button>
<script>
//獲取元素
var div = document.querySelector('div');
var btn = document.querySelector('button');
//透明度：不透明；賦給變量opa
div.style.opacity = 1;
var opa = parseFloat(div.style.opacity);
//給按鈕添加監聽事件fade_out
btn.addEventListener('click', fade_out);
//淡出方法
function fade_out() {
//讓按鈕不可用
btn.setAttribute('disabled', '');
//淡出
opa -= 0.1;
div.style.opacity = opa;
//定時器循環
var Out = setTimeout(function() {
if (opa <= 0) {
//關閉定時器（猶豫初學，無法解決精度問題，所以無法精確的讓opa == 0。滑稽）
clearTimeout(Out);
//移除按鈕不可用
btn.removeAttribute('disabled', '');
//按鈕變成淡入
btn.innerHTML = '淡入';
//移除監聽事件fade_out
btn.removeEventListener('click', fade_out);
//綁定監聽事件fade_in
btn.addEventListener('click', fade_in);
}else {
//調用自身
fade_out();
}
},100)
}
//淡入方法
function fade_in() {
btn.setAttribute('disabled', '');
opa += 0.1;
div.style.opacity = opa;
var In = setTimeout(function() {
if (opa >= 1){
clearTimeout(In);
btn.removeAttribute('disabled', '');
btn.innerHTML = '淡出';
}else {
fade_in();
}
}, 100);
}
</script>
</body>
</html>
在寫的過程中，我發現了一個問題，沒錯。他就是精度的問題。在不透明度（opacity）0~1之間的淡入淡出過程中，我發現無法做到精確計算，所以只能這樣做了。