Question

我做了一个脚本，当鼠标移过它时淡出一个按钮，然后在鼠标移出时淡入。它在“鼠标悬停”事件中工作正常，但它在'mouseout'任何想法上失败了吗？

P.S。我没有使用jquery，因为我试图将其用于教育目的。

转到此处查看代码：http://jsfiddle.net/assuredlonewolf/t2sYX/ 随意编辑它！

Answer 1

你有两个问题：

创建多个时间间隔，并且无处清除
您正在使用< 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内）。变量查找比函数调用便宜。

Answer 2

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

淡入功能故障

2 个答案: