這是用setInterval來實現的淡入淡出，感覺和上一篇沒啥區別，2333。看看setTimeout實現淡入淡出
<!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 obj = document.querySelector('div');
var btn = document.querySelector('button');
obj.style.opacity = 1;
var opa = parseFloat(obj.style.opacity);
btn.addEventListener('click', fade_out, false);
//淡出方法
function fade_out() {
var out = setInterval(function() {
if (opa <= 0) {
btn.textContent = '淡入';
btn.disabled = false;
clearInterval(out);
btn.removeEventListener('click', fade_out);
btn.addEventListener('click', fade_in);
}else{
btn.disabled = true;
opa -= 0.1;
obj.style.opacity = opa;
}
}, 100);
}
//淡入方法
function fade_in() {
var ov = setInterval(function(){
if (opa >= 1) {
btn.textContent = '淡出';
btn.disabled = false;
clearInterval(ov);
}else{
btn.disabled = true;
opa += 0.1;
obj.style.opacity = opa;
}
}, 100)
}
</script>
</body>
</html>