JavaScript: Fading out an element

From The Travis van der Font Wiki
Jump to: navigation, search
HTML:
<h1 id="text_example">Exampe text to fade....</h1>
<input type="button" id="btn" value="Fade Out" />
Source Code (JavaScript):
function fadeOut(id, speed, func, remove)
{
    func   = func   || false;
    remove = remove || false;

    var s = document.getElementById(id).style;
        s.opacity = 1;

    (function fade()
    {
        (s.opacity -= .1) < .1 ? s.display = 'none' : setTimeout(fade, speed);

        if (s.display === 'none')
        {
            if (remove === true)
            {
                document.getElementById(id).remove();
            }

            return func();
        }
    })();
}

var functionCall = function ()
{
	alert('finished!');
};

document.getElementById('btn').addEventListener('click', function (event)
{
    event.preventDefault();
    
    fadeOut('text_example', 100);
    //fadeOut('text_example', 100, functionCall, false);
});
(fadeOut is part of the TemperatureJS library)