CODEWITHSUNDEEP
javascriptcss
Abijeet Patro
Abijeet Patro

Reputation: 2884

Element fading in, but not fading out

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.

Upvotes: 2

Views: 168

Answers (2)

Oriol
Oriol

Reputation: 288510

See it here: http://jsfiddle.net/V8SAx/

First, you should never call setTimeout like this: setTimeout('animatefadein()', 50), because it uses eval, which is very slow and insecure.

Second, here you have the code:

function fadeIn(objectID, amount,callback) {
    object = document.getElementById(objectID + 'Des');
    object.style.display ='block';
    object.style.opacity = String(Number(amount<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);
            console.log(current + Number(amount));
            object.style.opacity = String(newopac);
            setTimeout(animatefadein, 50);

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

    }
    animatefadein();
}
fadeIn('a',0.1,function(){fadeIn('a',-0.1);});

I have added support for a callback, which is called after the fading process, maybe it interests you.

Upvotes: 1

Serj Sagan
Serj Sagan

Reputation: 30238

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

Upvotes: 2

Related Questions