vio

vio

  • Name: [not set]
  • Favorite Languages: [not set]
  • Website: [not set]
  • Location: [not set]
  • About Me: [not set]

Recent Comments

  • Javascript Tutorial - Simple Fade Animation
    03/24/2010 - 20:39

    Now you can specify different fade settings for each element.
    Also asynchronous fading is possible.
    The values in the code are just default values.

    fadeTime = 400;
    fadeMin = 0.0;
    fadeMax = 1.0;
    fadeRate = 20;

    function fade(id, time, min, max, rate, lastTick) {
            var tick = new Date().getTime();
            var element = document.getElementById(id);
            if (element.fadeState) {
                    if (lastTick)
                            element.fadeTimeElapsed += tick-lastTick;
                    else {
                            element.fadeState = element.fadeState == 1 ? -1 : 1;
                            element.fadeTimeElapsed = element.fadeTime-element.fadeTimeElapsed;
                            if (time != null) {
                                    element.fadeTimeElapsed = element.fadeTimeElapsed/element.fadeTime*time;
                                    element.fadeTime = time;
                            }
                            return;
                    }
            }
            else {
                    element.fadeTime = time != null ? time : element.fadeTime != null ? element.fadeTime : fadeTime;
                    element.fadeMin = min != null ? min : element.fadeMin != null ? element.fadeMin : fadeMin;
                    element.fadeMax = max != null ? max : element.fadeMax != null ? element.fadeMax : fadeMax;
                    element.fadeRate = rate != null ? rate : element.fadeRate != null ? element.fadeRate : fadeRate;
                    element.fadeState = element.style.opacity == element.fadeMax ? -1 : 1;
                    element.fadeTimeElapsed = 0.0;
            }
            var opacity = element.fadeTimeElapsed/element.fadeTime;
            if (element.fadeTimeElapsed >= element.fadeTime)
                    opacity = 1.0;
            if (element.fadeState == -1)
                    opacity = 1.0-opacity;
            opacity = (element.fadeMax-element.fadeMin)*opacity+element.fadeMin;
            element.style.opacity = opacity;
            element.style.filter = 'alpha(opacity='+opacity*100+')';// IE
            if (element.fadeTimeElapsed >= element.fadeTime)
                    element.fadeState = null;
            else
                    setTimeout("fade('"+id+"', null, null, null, null, "+tick+")", element.fadeRate);
    }

    Example for fading with default values:

    <img id=".." src=".." style=".." onmouseover="fade(this.id);" onmouseout="fade(this.id);" onclick="fade(this.id);" />

    The onclick event resets the fading. This is important when the image is a link. Otherwise the onmouseover and onmouseout events would be inverted after you hit the link and then go back with the browser button!

    Example for fading with only max value as default:

    <img id=".." src=".." style=".." onmouseover="fade(this.id, 1000, 0.2, null, 33);" onmouseout="fade(this.id);" onclick="fade(this.id);" />

    The values need to be just specified by the first triggered event.

    Example for asynchronous fading:

    <img id=".." src=".." style=".." onmouseover="fade(this.id, 200);" onmouseout="fade(this.id, 2000);" onclick="fade(this.id, 2000);" />

    By fading asynchronous you can't use default values for the fade time!

  • Javascript Tutorial - Simple Fade Animation
    03/09/2010 - 08:56

    Thanks for that nice code!
    I extended the code to specify min. and max. opacities and made it more compact by merging the two functions 'fade' and 'animateFade' to just one function again called 'fade'! Apart from that it behaves like the original code!

    fadeTime = 500.0;

    fadeMin = 0.0;
    fadeMax = 1.0;

    function fade(id, lastTick) {
            var tick = new Date().getTime();
            var element = document.getElementById(id);
            if (element.fadeState) {
                    if (lastTick)
                            element.fadeTime += tick-lastTick;
                    else {
                            element.fadeState = element.fadeState == 1 ? -1 : 1;
                            element.fadeTime = fadeTime-element.fadeTime;
                            return;
                    }
            }
            else {
                    element.fadeState = element.style.opacity == fadeMax ? -1 : 1;
                    element.fadeTime = 0.0;
            }
            var opacity = element.fadeTime/fadeTime;
            if (element.fadeTime >= fadeTime)
                    opacity = 1.0;
            if (element.fadeState == -1)
                    opacity = 1.0-opacity;
            opacity = (fadeMax-fadeMin)*opacity+fadeMin;
            element.style.opacity = opacity;
            element.style.filter = 'alpha(opacity='+opacity*100+')';// IE
            if (element.fadeTime >= fadeTime)
                    element.fadeState = null;
            else
                    setTimeout("fade('"+id+"',"+tick+")", 33);
    }

    You have to call the function with just one argument, for example:

    <img id="hover" src=".." style=".." onMouseOver="fade(this.id);" onMouseOut="fade(this.id);">

Sponsors