Javascript 如何消除衰退？

事实上，我不确定这是否是一个正确的问题。我真的不确定这里有什么问题。但无论如何。 我正在尝试创建一个表格，其中每个瓷砖都显示一种随机颜色，然后在鼠标悬停在上面后逐渐消失。现在我有能力在鼠标悬停时改变瓷砖的颜色，但我无法让它正确地褪色，因为当它确实褪色时，我无法在再次鼠标悬停后恢复任何颜色。我怎样才能让它在每次消失后重新开始？下面是我为其中一个互动程序编写的脚本

    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='';

---

可以在问题中包含html吗，创建stacksnippets进行演示？您能在包含html的JSFIDLE中实现吗？$document.readyfunction{你的函数中不需要它。你淡出元素，但什么时候淡出元素？你还应该优化你的if，而不是使用数组。当这起作用时，有时如果我将鼠标移到磁贴上太快，我会出现一个错误，说无法读取null的属性“style”。有什么解决方法吗？你能发布一个工作小提琴或至少你不喜欢html吗？