fadeIn fadeOut effect with Raw javascript

Question

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.

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.

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.

THE CODE:

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

Here is working example of your code ( with some corrections )

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

corrections include

• Start the fadein once the fadeout is completed ( right after you clear the fadeout )
• ues the parseFloat() method, because the code failed when it reached negative values.
• remove the createMouseOutFunction(tableCell, i); from the createMouseOverFunction because you assign it in the initial loop.

Answer 2

I think you'll probably need to use the this keyword in some of your event binding functions. However I haven't myself got your code to work.

I would recommend using a library such as jQuery . In particular .animate will probably be of use here.