如何取消渐变

How to nullify the fadeout?

本文关键字：渐变 取消 何取消      更新时间：2023-09-26

实际上我不确定这个问题是否正确。我真的不确定这里出了什么问题。但无论如何。我正在尝试创建一个表，在该表中，每个平铺显示一个随机颜色，然后在鼠标悬停后逐渐消失。现在，我可以在鼠标悬停时更改平铺颜色，但我无法正确地使其逐渐消失，因为当它逐渐消失时，我再鼠标悬停后无法恢复任何颜色。在每一次衰退之后，我究竟该如何让它重新开始？以下是我为其中一块瓷砖编写的脚本。

    document.onmouseover= userMoved; 
    function userMoved(event) {
    var x = event.clientX;
    var y = event.clientY;
    var coords = "X coords: " + x + ", Y coords: " + y;
    var index = Math.round(Math.random() * 9);
    var ColorValue = "FFFFFF"; 
        if(index == 1)
        ColorValue = "FFCCCC";
        if(index == 2)
        ColorValue = "CCAFFF"; 
        if(index == 3)
        ColorValue = "A6BEFF"; 
        if(index == 4)
        ColorValue = "99FFFF"; 
        if(index == 5)
        ColorValue = "D5CCBB"; 
        if(index == 6)
        ColorValue = "99FF99";
        if(index == 7)
        ColorValue = "FFFF99"; 
        if(index == 8)
        ColorValue = "FFCC99"; 
        if(index == 9)
        ColorValue = "CCCCCC";
    if (x>100 && x<201 && y>100 && y<200){
        document.getElementById("row1column1").style.backgroundColor = "#"+ColorValue;
        $(document).ready(function(){
        $("#row1column1").mouseleave(function(){
            $("#row1column1").fadeOut();
        });
        });
    }

问题是.fadeOut（）会降低不透明度，直到它达到0，此时元素的显示设置为无。（不透明度重置为1）。

当你匹配你的onmouseover条件时，你的元素需要重置其显示

document.getElementById('row1column1').style.display='';
相关文章：