Question

I made a script that fades out a button when the mouse goes over it and fades in on mouse out. It works fine on the ‘mouseover’ event, but it fails on the ‘mouseout’ any ideas?

P.S. I not using jquery because I am trying to learn this for educational purposes.

Go here to see the code: http://jsfiddle.net/assuredlonewolf/t2sYX/
Feel free to edit it!

Answer 1

You’ve got two issues:

• The interval is created multiple times, and cleared nowhere
• You’re using < 1.1 to determine whether the element should become visible or not, while the fade count start at 1.1. Clearly, 1.1 is never lower than 1.1.

Updated code, feel free to ask help if you’re having trouble implementing it:

var interval; // Declare a variable to hold the timer OUTSIDE the function, 
              //  so that all event listeners can work with ONE interval
function fade(elem, speed, mode) {
    var count = 0;
    var fade = 1.0;
    clearInterval(interval); // Clear interval, to prevent having multiple
                             //  running intervals
    if (mode === true && count == 0) {
        count = 1;
        interval = setInterval(function() {
            fade = fade - .1;
            if(fade > -.1) document.getElementById(elem).style.opacity = fade;
        }, speed)
    } else {
        count = 0;
        interval = setInterval(function() {
            fade = fade + .1;
            // Updated code below: Replaced < with <=
            if(fade <= 1.1) document.getElementById(elem).style.opacity = fade;
        }, speed)
    }
}

Additional tips:

• Store document.getElementById(elem) in a variable, outside the interval function (but inside function fade, for performace reasons. A varibale look-up is less expensive than a function call.