fadeIn fadeOut effect with Raw javascript
<p>I am currently working on a experiment with RAW Javascript. I was wondering why it is not working. In fact I have scratched my head until there is no hair left... :P. </p>

<p>I am making a table with TR elements to be hovered over with some Javascript event. I think you will know exactly what I mean if you look at the code. The point is to get stuff to fade out first and then fade in afterwards when it reaches zero.</p>

<p>I am a beginner and maybe this can be done with the existing code. But of course if it is possible in another way of programming, I am open for suggestions. </p>

<p>THE CODE:</p>

<pre><code>window.onload = changeColor;

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


function changeColor() {
    for(var i = 0; i &lt; 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 &gt; 0) {
                tableCell.style.opacity -= OpacitySpeed;
            } else if (tableCell.style.opacity &lt;= 0) {
                clearInterval(fadeOut);
            }
        }, intervalSpeed);

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

    }
}
</code></pre>
