Javascript Opacity - Fading In and Out
- From: MartinRinehart@xxxxxxxxx
- Date: Fri, 4 Jul 2008 11:16:41 -0700 (PDT)
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
.
- Prev by Date: Re: Multiple scripts on same HTML page
- Next by Date: Re: Javascript Slideshow + MS Acess
- Previous by thread: Multiple scripts on same HTML page
- Next by thread: How to pass a parameter for a function parameter in a function
- Index(es):
Relevant Pages
|
