Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Javascript Opacity - Fading In and Out

Reply
Thread Tools

Javascript Opacity - Fading In and Out

 
 
MartinRinehart@gmail.com
Guest
Posts: n/a
 
      07-04-2008
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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
opacity fading windandwaves Javascript 8 07-15-2007 09:39 PM
help! I can not get fade-in or fade-out of opacity in IE Jake Barnes Javascript 6 09-03-2006 07:54 AM
Fading in and out Rich Sagall Javascript 4 05-15-2006 04:32 PM
fading DVD movie in and out using NeroVision Express 3 Takanohans DVD Video 1 07-30-2005 04:40 AM
speakers fading out and popping JohnF Computer Support 8 10-30-2003 11:56 PM



Advertisments