淡入淡出元素並運行回調

Question

好吧，我已經嘗試了很多不同的方法。我試圖學習JavaScript而不總是訴諸於jQuery。我正在嘗試創建類似的功能來淡入一個元素，然後再使用（使用回調作爲參數）。

鑑於此元素： <div id="something">asdf</div>

當我運行這個JavaScript（或類似的東西），我最終要麼讓閃爍的影響（我認爲這無論從fadeIn和fadeOut功能運行的），或者只是有它褪色當我試圖一次對多個元素執行此操作時（在for循環中），會出現更多的問題，但我猜測「閉包」將是答案。一心一意。

function setOpacity(element, value) { 
    element.style.opacity = value/100; 
    element.style.filter = 'alpha(opacity=' + value + ')'; 
} 

function fadeIn(element, speed, callback) { 
    if(! speed) { speed = 1000; } 
    var speed = speed/100; 
    for (var i = 0; i < 100; i++) { 
     setTimeout((function(i){ return function(){ setOpacity(element, i); } })(i), (i * speed)); 
    } 
    if (callback && typeof(callback) === 'function') { 
     setTimeout(function(){ 
      return function() { 
       callback(); 
      } 
     }, (100 * speed)); 
    } 
} 

function fadeOut(element, speed, callback) { 
    if(! speed) { speed = 1000; } 
    var speed = speed/100; 
    for (var i = 100; i > 0; i--) { 
     setTimeout((function(i){ return function(){ setOpacity(element, i); } })(i), ((100 - i) * speed)); 
    } 
    if (callback && typeof(callback) === 'function') { 
     setTimeout(function(){ 
      return function(){ 
       callback(); 
      } 
     }, (100 * speed)); 
    } 
} 

element = document.getElementById('something'); 
element.onclick = function() { 
    fadeIn(element, 1000, function() { 
     fadeOut(element, 1000, function() { 
      // All done 
     }); 
    }); 
} 

Answer 1

嘗試使用setInterval代替setTimeout：

var timer, i = 0; 
timer = setInterval(function() { 
    if(++i == 100) { 
     clearInterval(timer); 
     callback(); 
     return; 
    } 
    setOpacity(element, i); 
}, speed); 

在啓動101個定時器一次是不是友好的瀏覽器，但該站本身不是什麼大不了的一個間隔定時器。此外，100次迭代可能過高，15-20次可能綽綽有餘;在切換到setInterval後，您可以使用該號碼進行遊戲，但您可能會感到驚訝，您可以在不影響視覺表現的情況下獲得多低。