fade fade out effect need for existing javascript code provided

Is it possible to app开发者_StackOverflowly a fade in fade out effect to javascript code please?

At the moment it just pops up an image and disappears with no effect applied. Thank you in advance.

Since your site is already using jQuery, look into using jQuery fadeIn() and fadeOut() functions.

$('div').fadeOut();

FadeIn() and FadeOut() needs a duration set, like FadeIn("slow"); or FadeOut("fast"); or even in milliseconds like FadeIn(3000); otherwise the fade effect is'nt really a fade effect as it happens instantly. The setInterval() function only loops the fades.

try the below script

function gradient(id, level)

{

    var box = document.getElementById(id);

    box.style.opacity = level;

    box.style.MozOpacity = level;

    box.style.KhtmlOpacity = level;

    box.style.filter = "alpha(opacity=" + level * 100 + ")";

    box.style.display="block";

    return;

}



function fadein(id) 

{

    var level = 0;

    while(level <= 1)

    {

        setTimeout( "gradient('" + id + "'," + level + ")", (level* 1000) + 10);

        level += 0.01;

    }

}

function centerPopup()
{
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    //alert(windowWidth); alert(windowHeight);
    var popupHeight = 300;
    var popupWidth = 400;
    //alert(windowHeight/2-popupHeight/2); alert(windowWidth/2-popupWidth/2);
    document.getElementById(AnyElement).style.top = windowHeight/2-popupHeight/2 + 'px';
    document.getElementById(AnyElement).style.left = windowWidth/2-popupWidth/2 + 'px';
} 

function openbox(fadin)

{
    var box = document.getElementById(AnyElement);
    document.getElementById(AnyElement).style.display = 'block';

    if(fadin)

    {

        gradient("box", 0);
        fadein("box");
        centerPopup();

    }

    else

    {   

        box.style.display='block';

    }
}

function closebox()

{

    document.getElementById(AnyElement).style.display = 'none';

    document.getElementById(AnyElement).style.display = 'none';

}