退色功能故障

fade function trouble

本文关键字：功能故障      更新时间：2023-09-26

我编写了一个脚本，当鼠标经过按钮时淡出按钮，鼠标退出时淡出按钮。它在'mouseover'事件上工作得很好，但在'mouseout'事件上失败了，有什么想法吗?

注:我没有使用jquery，因为我想学习它的教育目的。

到这里查看代码:http://jsfiddle.net/assuredlonewolf/t2sYX/请随意编辑!

有两个问题:

  • 间隔被多次创建，并且无处清除
  • 您使用< 1.1来确定元素是否应该变得可见，而fade计数从1.1开始。显然，1.1绝不会低于1.1。

更新的代码，如果你在实现它时有困难，请随时寻求帮助:

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中)。变量查找比函数调用更便宜。

首先，永远不要停止间隔计时器。一旦开始，就会永远持续下去。您需要保存设置间隔的返回值，并在完成渐变时使用clearInterval停止计时器。

相关文章：