Javascript fadein on mouseover works but doesn't fadeout

Question

So real simply, I have figured out how to fade a div in on a mouseover call. But I want to know how to fade it out without simply duplicating the javascript opposite of what it already is and linking that to a onmouseout.

Here is my Javascript:

<script type="text/javascript">
    function fadein(objectID){
object = document.getElementById(objectID);
object.style.opacity = '0';

animatefadein = function (){
 if(object.style.opacity < 1){   
 var current = Number(object.style.opacity);     
var newopac = current + 0.1;
object.style.opacity = String(newopac);     
setTimeout('animatefadein()', 100);
}
}
animatefadein();
}

and my html

<div id="rolloverwrapper" style="opacity:0;"></div>
<div id="wrapper">
    <div id="content">
        <div id="button">
            <img src="images/dj.png" onmouseover="fadein('rolloverwrapper');"/>
        </div>
    </div>
</div>

Answer 1

Try something like this:

<script type="text/javascript">
    function fade(objectID, amount) {
        var MIN_OPACITY = 0;
        var MAX_OPACITY = 1;

        object = document.getElementById(objectID);

        animatefade = function() {
            if(object.style.opacity < MAX_OPACITY && object.style.opacity > MIN_OPACITY){   
                var current = Number(object.style.opacity);     
                var newopac = current + amount;
                object.style.opacity = String(newopac);     
                setTimeout('animatefade()', 100);
            }
        }
        animatefade();
    }
</script>

With the following HTML:

<img src="images/dj.png" onmouseover="fade('rolloverwrapper', 0.1);" onmouseout="fade('rolloverwrapper', -0.1);"/>

Answer 2

If the behavior you want is the opposite of what you already have, but on a different event, then simply do it. Don't look for fancy solutions when you know a simple one already and it works.

Answer 3

Add a parameter to your fadein function to specify the fade direction. 1/-1, 0/1, t/f, etc... and pass that in to your animatefadein.

Then you'd have

<img src="..." onmouseover="fadein('rolloverwrapper', 1)" onmouseout="fadein('rolloverwrapper, 0)" />

However, you should look into using jquery for this sort thing. The library would be a "heavy" compared to just these few lines of JS, but the flexibility you gain is vast.