淡入淡出功能故障

Question

我做了一个脚本，当鼠标经过一个按钮时，它会淡出，当鼠标移出时，会淡入。它在“mouseover”事件上工作得很好，但在“mouseout”事件上失败了。

附注:我不使用jquery，因为我正在尝试学习jquery以达到教育目的。

转到这里查看代码：http://jsfiddle.net/assuredlonewolf/t2sYX/可以随意编辑它！

Answer 1

你有两个问题：

• 该间隔被创建了多次，并清除了nowhere
• 您正在使用< 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)存储在一个变量中，在interval函数之外(但出于性能原因，在function fade内部)。变量查找比函数调用更便宜。

Answer 2

首先，你永远不要停止你的时间间隔计时器。一旦开始，它就会永远消失。您需要保存设置间隔的返回值，并在淡入淡出完成后使用clearInterval停止计时器。