淡入淡出功能問題

我製作了一個腳本，當鼠標滑過並淡出鼠標時淡出按鈕。它可以在'mouseover'事件上正常工作，但是它在'mouseout'上失敗了嗎？淡入淡出功能問題

P.S.我不使用jquery，因爲我正在嘗試爲了教育目的而學習它。

去這裏看代碼：http://jsfiddle.net/assuredlonewolf/t2sYX/ 隨意編輯它！

2011-12-24 James Fair

你有兩個問題：

的時間間隔產生多次，並且清除無處
您使用< 1.1來確定元素是否應該成爲可見或不可見，而fade計數從1.1開始。顯然，1.1永遠不會低於1.1。

Updated code，覺得免費的，如果您無法實現它問的幫助：

var interval; // Declare a variable to hold the timer OUTSIDE the function, 
       // so that all event listeners can work with ONE interval 
function fade(elem, speed, mode) { 
    var count = 0; 
    var fade = 1.0; 
    clearInterval(interval); // Clear interval, to prevent having multiple 
          // running intervals 
    if (mode === true && count == 0) { 
     count = 1; 
     interval = setInterval(function() { 
      fade = fade - .1; 
      if(fade > -.1) document.getElementById(elem).style.opacity = fade; 
     }, speed) 
    } else { 
     count = 0; 
     interval = setInterval(function() { 
      fade = fade + .1; 
      // Updated code below: Replaced < with <= 
      if(fade <= 1.1) document.getElementById(elem).style.opacity = fade; 
     }, speed) 
    } 
}

其他提示：在一個變量

商店document.getElementById(elem)，間隔功能外（但在function fade之內，由於性能的原因，varibale查找比函數調用的價格便宜

來源

2011-12-24 22:53:14

感謝羅布，並感謝您的額外信息 – 2011-12-24 22:56:51

嗯。我的編輯消失了。無論如何，您還應該清除'if（fade ...）'塊中的間隔，以防止推子在不必要時繼續播放。 – 2011-12-24 23:06:50

您是否有Skype或電子郵件 – 2011-12-24 23:23:38

首先，您永遠不會停止您的間隔計時器。一旦開始，它就會永遠。您需要保存設置間隔的返回值，並在完成淡入淡出後停止使用clearInterval的計時器。

來源

2011-12-24 22:53:57 jfriend00

淡入淡出功能問題

回答

相關問題