javascript - 使用 Raw javascript 实现 fadeIn fadeOut 效果

Question

我目前正在使用 RAW 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);

    }
}

Answer 1

这是您的代码的工作示例(进行了一些更正)

http://www.jsfiddle.net/gaby/yVKud/

更正包括

• 淡出完成后开始淡入(在清除淡出后立即)
• 使用parseFloat()方法，因为代码在达到负值时失败。
• 从 createMouseOverFunction 中删除 createMouseOutFunction(tableCell, i);，因为您在初始循环中对其进行了分配。