Question

I have the following javascript

function fadeIn(objectID, amount) {
object = document.getElementById(objectID + 'Des');
if(amount > 0)
{
    object.style.display ='block';
    object.style.opacity = '0';
}
var i = 0;
animatefadein = function()
{
    var MIN_OPACITY = 0;
    var MAX_OPACITY = 1;
    if ( (amount > 0 && object.style.opacity < MAX_OPACITY) || (amount < 0 && object.style.opacity > MIN_OPACITY)) 
    {
        var current = Number(object.style.opacity);
        var newopac = current + Number(amount);
        object.style.opacity = String(newopac);
        setTimeout('animatefadein()', 50);

    }

}
animatefadein();
if(amount < 0)
{
    object.style.display ='none';
}

}

I need to set display to none because on top of it another element needs to be placed if the user browses over them.

Here is the HTML,

<div id='products'>
            <img src = './product1.png' usemap='#ourProducts' alt='Our Products' title='Hover over the names to find out more.'>
            <map id='ourProducts' name='ourProducts'>
                <area shape='rect' coords="55,55,210,110" href='#' id='forcePort' alt='ForcePort' title='ForcePort' onmouseover='fadeIn("forcePort",0.1)' onmouseout='fadeIn("forcePort",-0.1)'/>
                <area shape='rect' coords="105,248,270,290" href='#' id='quickPort' alt='QuickPort' title='QuickPort' onmouseover='fadeIn("quickPort",0.1)' onmouseout='fadeIn("quickPort",-0.1)'/>
                <area shape='rect' coords="390,260,535,303" href='#' id='scrinter' alt='Scrinter' title='Scrinter' onmouseover='fadeIn("scrinter",0.1)' onmouseout='fadeIn("scrinter",-0.1)'/>
                <area shape='rect' coords="675,242,835,292" href='#'  id='bugTrail' alt='Bug Trail' title='Bug Trail' onmouseover='fadeIn("bugTrail",0.1)' onmouseout='fadeIn("bugTrail",-0.1)'/>
                <area shape='rect' coords="688,42,858,138" href='#' id='dataExtract' alt='CRM Data Extractor' title='CRM Data Extractor' onmouseover='fadeIn("dataExtract",0.1)' onmouseout='fadeIn("dataExtract",-0.1)'/>
            </map>
            <div id='productDes'>
                <div id='scrinterDes'>
                                      Data that needs to be shown!
                </div>
                <div id='bugTrailDes'>
                </div>
                <div id='quickPortDes'>
                </div>
                <div id='forcePortDes'>
                </div>
                <div id='dataExtractDes'>
                </div>
            </div>
        </div>

As you can see the fade out is not working. Also if you put a counter inside the setTimeout loop and print it to the console you’ll see that it loops uncountable times on the fade out event. Here is the site in question,

Website

Just head over to products on the display, and hover over the product names.

Answer 1

I would hope that you realize that this is very easily accomplished with jQuery http://jquery.com/ The problem with your script is that Opacity and Display are two distinct CSS properties, to make this work, you’d need to set Opacity to 0, change Display: none to block or inline-block and then animate your Opacity