使用原始javascript的淡出淡出效果

我目前正在做一个使用原始Javascript的实验。我想知道为什么它不起作用。事实上，我已经抓伤了我的头，直到没有头发了……：P

我正在创建一个包含TR元素的表，该表将通过一些Javascript事件悬停在上面。如果你看一下代码，我想你会完全明白我的意思。关键是让东西先淡出，然后在它达到零时淡入

我是一个初学者，也许这可以用现有的代码来完成。当然，如果可以用另一种编程方式，我愿意听取建议

守则：

window.onload = changeColor;

var tableCells = document.getElementsByTagName("td");


function changeColor() {
    for(var i = 0; i < tableCells.length; i++) {
        var tableCell = tableCells[i];
        createMouseOutFunction(tableCell, i);
        createMouseOverFunction(tableCell, i);
    }
}


function createMouseOverFunction(tableCell, i) {
    tableCell.onmouseover = function() {
        tableCell.style.opacity = 1;
        createMouseOutFunction(tableCell, i);
    }
}

function createMouseOutFunction(tableCell, i) {
    var OpacitySpeed = .03;
    var intervalSpeed = 10;

    tableCell.onmouseout = function() {
        tableCell.style.opacity = 1;
        var fadeOut = setInterval(function() {
            if(tableCell.style.opacity > 0) {
                tableCell.style.opacity -= OpacitySpeed;
            } else if (tableCell.style.opacity <= 0) {
                clearInterval(fadeOut);
            }
        }, intervalSpeed);

        var fadeIn = setInterval(function(){
            if(tableCell.style.opacity <= 0){
                tableCell.style.opacity += OpacitySpeed;
            } else if(tableCell.style.opacity == 1){
                clearInterval(fadeIn);
            }
        }, intervalSpeed);

    }
}

window.onload=changeColor；
var tableCells=document.getElementsByTagName（“td”）；
函数changeColor（）{
对于（var i=0；i0）{
tableCell.style.opacity-=不透明速度；
}else if（tableCell.style.opacity我认为您可能需要在一些事件绑定函数中使用关键字。但是我自己还没有让您的代码正常工作

我建议使用一个库，例如。在这里可能特别有用。
这里是代码的工作示例（有一些更正）


更正包括


淡出完成后（清除淡出后立即启动淡出）
使用该方法，因为代码在达到负值时失败
从
createMouseOverFunction
中删除
createMouseOutFunction（tableCell，i）；
，因为您在初始循环中分配了它
另外，这取决于您使用的浏览器和CSS版本。
style.opacity
可能不存在。您将不得不使用
style.filter='alpha:（opacity=0）
等。使用jQuery的另一个原因：）在看到Gaby的答案后，我想我应该投自己的反对票！我面临的挑战是如何在不使用库或框架的情况下解决这个问题：）