Question

我正在尝试应用渐变效果，例如，如果我的鼠标经过一个网格单元，它会首先亮起，但是如果我将鼠标移向那个特定的单元，它就会逐渐变亮。这是我的项目https://repl.it/@antgotfan/etch-a-sketch，这是一个有效的示例（不是我的顺便说一句），https://codepen.io/beumsk/pen/dVWPOW（只需单击渐变即可看到效果）

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

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

在该功能中，不透明度会永远增加，但会保持白色。

Answer 1

问题是在let opacity = 0.1;事件之外设置了.hover。该值应基于要悬停的单元格，因此请通过event.target.style.opacity在事件内部获取它。另外，请确保将其正确解析为float以允许正确递增（parseFloat()）：

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

以下是更新的Repl.it供参考：https://repl.it/repls/GreenDigitalWireframe

可选更改的夫妇；添加了最大不透明度检查。超过1的都是多余的。还可以考虑使用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"})
        }
    });
}

编辑：为澄清起见，将let opacity = 0.1与${opacity += 0.1}结合使用不起作用的原因是，在.hover的每个实例中，值opacity都在递增由0.1设置，但从不重置。本质上，经过9（或10）次迭代后，opacity的值大于1，因此每个单元立即被“填充”。

第二次编辑：为了防止为.hover（或.mouseenter）功能分配多个句柄，在设置之前添加事件解除绑定：

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

...

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

还要确保绑定事件在.hover或.mouseenter这两个函数之间是一致的。

逐步增加素描项目的不透明度

1 个答案: