純Javascript正在淡入淡出不起作用

Question

我試圖用JavaScript創建淡入淡出功能，但它不起作用。請告訴我我做錯了什麼。 我沒有收到轉換效果。

var fade_in_btn = document.getElementById('fade-in'), 
    fade_out_btn = document.getElementById('fade-out'), 
    fading_div = document.getElementById('fading-div'); 

function sleep(milliseconds) { 
    var start = new Date().getTime(); 
    for (var i = 0; i < 1e7; i++) { 
     if ((new Date().getTime() - start) > milliseconds){ 
     break; 
     } 
    } 
} 

fade_out_btn.onclick = function(){ 
    for (var i=100; i >= 0; i--) { 
     sleep(0010); 
     opacity_function(i); 
    } 
} 

fade_in_btn.onclick = function(){ 
    for (var i=1; i <= 100; i++) { 
     sleep(0010); 
     opacity_function(i); 
    } 
} 

function opacity_function(opacity_value){ 
    fading_div.style.opacity = opacity_value/100; 
    fading_div.style.filter = 'alpha(opacity=' + opacity_value + ')'; 
    console.log(fading_div.style.opacity); 
} 

Fiddle與HTML。

全部代碼工作正常。但從我的角度來看，問題是for ...循環在每次迭代之後都不更新不透明度的值;它只是更新最終值。

請幫我解決這個問題。

Answer 1

這是一個純粹的JS答案，不使用​​但我選擇放棄你的睡眠功能，因爲它是一個奇怪的選擇和不好的做法（和你的不工作，也請注意，不可以有真正在JS sleep） 這個作品：

fade_out_btn.onclick = function(){ 
    var i = 100; 
    var myint = setInterval(function(){ 
     opacity_function(i); 
     i--; 
    if (i<0) clearInterval(myint); 
     console.log(i); 
    },10); //this is the number of ms between iterations of the codeblock in my setInterval function 
} 

[編輯：一些人被推薦的setTimeout。我看沒有必要的，但如果你真的想用setTimeout的，這是我會怎麼做：

var i = 100; 

function fadeout(){ 
var myint = setTimeout(function(){ 
    opacity_function(i); 
    i--; 
if (i>0) fadeout(); 
},10); 
} 

fade_out_btn.onclick = fadeout; 

通知兩兩件事：
1 - 我外面拉功能的我的定義。您必須抓取您希望從函數外部遞減的那個值，因爲您淡出的初始值可能不總是100，而是將其設置爲不透明度的當前值，即值爲fading_div.style.opacity * 100。
2 - 我將回調綁定到onclick。

關於setInterval和setTimeout之間進行選擇：
setInterval和setTimeout都只是計劃的代碼的執行。 setInterval時間表事件每隔 x毫秒從執行，而一系列鏈接setTimeout s安排在 x毫秒，然後再次執行，然後安排另一個事件在x毫秒。所以setTimeout會有一點時間開銷，因爲實際時間間隔是x + (the time is takes to execute the codeblock once)。如果一次執行所需的時間大於指定的時間間隔，但使用setInterval時可能會遇到問題，但這不會影響您的簡單程序。見here
]