Javascript 逐渐增加蚀刻草图项目的不透明度

我正在尝试应用渐变效果，例如，如果我的鼠标经过一个网格单元，它将首先变亮，但我越是将鼠标移向该特定单元，它将逐渐变亮。这是我的项目，这是一个工作的例子（不是我的顺便说一句），（只需点击渐变，就会看到效果）

我试图使用“this”和event.target来解决此问题，但它不起作用。我还尝试在jQuery中使用fadeIn，但这不是我想要的效果

 function incrementOpacity() {
     let opacity = 0.1;
     $(".cell").hover((event) => {
         $(event.target).css({"opacity": `${opacity += 0.1}`, 
 "backgroundColor": "#f5f5f5"})
     });
 }

---

在函数中，不透明度将永远增加，但将保持白色。

问题是设置

让不透明度=0.1在
.hover
事件之外。该值应基于悬停的单元格，因此通过
event.target.style.opacity
在事件内部获取该值。另外，请确保将其正确解析为
浮点值
，以允许正确递增（
parseFloat（）
）：

以下是更新后的Repl.it供参考：

一些可选的变化；增加了最大不透明度检查。任何超过1的都是多余的。还考虑使用<代码>鼠标器>代码>函数，因此不透明度仅在悬停时增加，而不是悬停：

function incrementOpacity() {    
    $(".cell").mouseenter((event) => {
        let opacity = parseFloat(event.target.style.opacity);
        if(opacity <= 0.9){
          $(event.target).css({"opacity": `${opacity + 0.1}`, "backgroundColor": "#f5f5f5"})
        }
    });
}

另外，请确保绑定事件在两个函数之间是一致的，无论是
.hover
还是
.mouseenter
这确实有很大帮助，但现在有一个bug，每当我单击随机，然后单击渐变，随机事件仍然被激活，因此渐变将不再工作。是的，我注意到，在这些变化之前，它确实存在；可能与绑定有关。让我查一查。哦，等等；我明白了。现在的事情太不一样了<代码>鼠标指针

和

悬停

；它们必须是相同的，无论哪个更适合你的用例。谢谢你，蒂姆，我将试着理解你做了什么！再次感谢您的帮助。现在添加了一个编辑；事件解除绑定。基本上，在分配

.mouseenter

的处理程序之前，请先将其删除，这样就不会有冲突。有两个单独的函数处理

.hover

（或

.mouseenter

函数），代码使用最后分配的函数来处理它。

function incrementOpacity() {    
    $(".cell").mouseenter((event) => {
        let opacity = parseFloat(event.target.style.opacity);
        if(opacity <= 0.9){
          $(event.target).css({"opacity": `${opacity + 0.1}`, "backgroundColor": "#f5f5f5"})
        }
    });
}

function incrementOpacity() {
    $(".cell").off("mouseenter");
    $(".cell").mouseenter((event) => { ... });
}

...

function getRandomColors() {
    $(".cell").off("mouseenter");
    $(".cell").mouseenter((event) => { ... });
}