Javascript Opacity - Fading In and Out

Discussion in 'Javascript' started by MartinRinehart@gmail.com, Jul 4, 2008.

  1. Guest

    The following code updates the classic BrainError code for fading
    elements in/out. If you are using that code, note that I've changed
    the calling opacity to the standard: 1.0 = opaque, 0.0 = gone. (R.I.P.
    BrainError.)

    Tested on Win: Opera 9, Firefox 2, MSIE 7.
    On KDE 3.3.2 works in Opera and Firefox, but not with Konqi 3.3.2.
    Help appreciated.

    Licensed to all under the beer license. You try it? You like it? You
    buy the beer next time we meet.

    If this forum screws it up, try http://www.MartinRinehart.com/08/js/fade.js
    ---------------------------------------------------------------------------------------------------------------------------------------------
    /* js/fade.js -- make an HTML element fade away
    Copyright 2008, Martin Rinehart
    Based on functions from http://brainerror.net/scripts/javascript/blendtrans/
    */

    function delayed_fade( id, millis_delay, millis_fade, start, end ) {
    // id -- id of element to fade
    // millis_delay -- millis before starting fade
    // millis_fade -- duration of fade
    // start -- optional starting opacity (1.0 = opaque, default; 0.0
    = gone )
    // end -- optional ending opacity (defaults to 0.0)

    to = "fade(";
    to += "'" + id + "'";
    to += "," + millis_fade;
    to += "," + start;
    to += "," + end
    to += ")";
    setTimeout( to, millis_delay );
    }

    function fade( id, millis, start, end ) {
    // id -- id of element to fade
    // millis -- duration of fade
    // start -- optional starting opacity (1.0 = opaque, default; 0.0
    = gone )
    // end -- optional ending opacity (defaults to 0.0)

    // mistake? find out early, complain loudly
    obj = document.getElementById( id );
    if ( !obj ) {
    alert(
    'In fade(): object with id "' + id + '" not found.\n\n'+
    'No one except the programmer should ever see this message.
    \n\n'+
    'Please contact him immediately ("Contact Us"). Many
    thanks.' );
    return;
    }

    if ( start === undefined ) start = 1.0;
    if ( end === undefined ) end = 0.0;
    //speed for each frame
    var distance = start - end;
    var DELAY = 50 // "constant" - redraw every DELAY millis
    var nsteps = millis / DELAY;
    var stepsize = distance / nsteps;
    var opacity = start;

    // alert( 'in fade(): start=' + start +
    // ', end=' + end +
    // ', distance=' + distance +
    // ', nsteps=' + nsteps +
    // ', stepsize=' + stepsize +
    // ', opacity=' + opacity
    // );

    for ( var i = 0; i < nsteps; i++ ) {
    opacity -= stepsize;
    setTimeout( "setOpacity(" + opacity + ", '" + id + "' )",
    DELAY*i );
    }
    // no ghosts!
    setTimeout( "setOpacity( " + end + ", '" + id + "' )",
    DELAY*nsteps );
    }

    // set the opacity for different browsers
    function setOpacity( opacity, id ) {
    /* Stuff like this is vital to know and takes forever to ferret
    out.
    Thanks, brainerror. */

    if ( opacity < 0 ) opacity = 0;
    if ( opacity > 1 ) opacity = 1;

    object = document.getElementById( id )

    if ( object && object.style ) {
    var style_ = object.style;

    style_.opacity = opacity;// modern browsers
    style_.MozOpacity = opacity; // original Mozilla
    style_.KhtmlOpacity = opacity; // older Konqueror, Safari
    style_.filter = "alpha(opacity=" + (100*opacity) + ")"; //
    guess who
    }

    } // end of changeOpacity()

    // end of js/fade.js
     
    , Jul 4, 2008
    #1
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Michael
    Replies:
    1
    Views:
    353
    Harald Hein
    Dec 23, 2003
  2. Yuk Cheng
    Replies:
    2
    Views:
    149
    Dan Webb
    Jul 19, 2004
  3. Rich Sagall

    Fading in and out

    Rich Sagall, May 15, 2006, in forum: Javascript
    Replies:
    4
    Views:
    159
    Lasse Reichstein Nielsen
    May 15, 2006
  4. Jake Barnes
    Replies:
    6
    Views:
    220
    Evertjan.
    Sep 3, 2006
  5. windandwaves

    opacity fading

    windandwaves, Jul 6, 2007, in forum: Javascript
    Replies:
    8
    Views:
    93
Loading...

Share This Page