Opacity number crunching loop?

[Tuxedo]

I'd like to display an animation whereby images blend into each other, and
so have a question regarding the for-loop construct.

To start simply by a 2-image animation:

There is a 'div' containing the first and visible image.

<div id="container" style="width:300;height:250">
<img src="photo1.jpg" id="photo" width="300" height="250">
</div>

The background image of the div should become the second image by gradually
increasing the opacity of the foreground image.

Setting a background in the div while the first image is non-transparent,
can of course be done in CSS/JS as follows:

document.getElementById("container").style.backgroundImage="url(photo2.jpg)";

Therafter, I would like to gradually increase the opacity of the visible
photo from 0.1 (no opacity) to 0.0 (full opacity) thereby giving the
impression of the next image blending into view over the previous.

Setting opacity in JS/CSS is simply done, in the latest browsers, as
follows:

document.getElementById("photo").style.opacity=1.0; // no opacity

document.getElementById("photo").style.opacity=0.0; // full opacity

My question is, how can the loop be done, starting from no opacity to full
opacity, in for example 100 increments over a period of one second, by
setting/resetting the opacity and decimal values until the loop is complete?

Thanks in advance for any ideas.

 

[Emmanuel]

My question is, how can the loop be done, starting from no opacity to full
opacity, in for example 100 increments over a period of one second, by
setting/resetting the opacity and decimal values until the loop is complete?

Here is the code which is at work at <http://beta.quomodo.com> (when
you edit a note all others become half-transparent). I edited it a bit
(for your purpose), so I may have introduced some bugs. On the other
hand, I provide the additional stuff for IE6.

Instructions for use: call qsn_dim with div = the element concerned,
dimtarget = the opacity value you want to reach

var nsteps = 100
var duration = 1000 // thousandths of a seconds, that is 1 second

function qsn_dim ( div , dimtarget ) {
div.dimtarget = dimtarget ;
do_qsn_dim( div ) ;
}

function do_qsn_dim( div ) {
if ( ! div.style.opacity ) div.style.opacity = "1" ;
var opa = parseFloat ( div.style.opacity ) ;
if ( div.dimtarget > opa ) {
opa = opa + 1.0/nsteps ;
if ( opa > div.dimtarget ) opa = div.dimtarget ;
} else {
opa = opa - 1.0/nsteps ;
if ( opa < div.dimtarget ) opa = div.dimtarget ;
}
div.style.opacity = "" + opa ;
div.style.filter = "alpha(opacity=" + Math.round ( 100 * opa ) +
")" ;
if ( opa != div.dimtarget ) setTimeout ( "do_qsn_dim ( '" + x +
"' )" , duration/nsteps ) ;
} // opacity: "0.5" ; filter: alpha(opacity=50)

 

[RobG]

I'd like to display an animation whereby images blend into each other, and
so have a question regarding the for-loop construct.

Opacity has some issues in a cross-browser environment, notably
performance and different support in different browsers. Below is a
link to a discussion that you might find useful:

<URL: http://groups.google.com.au/group/forkjavascript/browse_frm/
thread/e20278372e54f5b0?hl=en >

[...]

Setting opacity in JS/CSS is simply done, in the latest browsers, as
follows:

document.getElementById("photo").style.opacity=1.0; // no opacity

document.getElementById("photo").style.opacity=0.0; // full opacity

Safari has an issue with setting opacity to 1.0:

<URL: http://dev.rubyonrails.org/ticket/7063 >

 

[Tuxedo]

[..]

hand, I provide the additional stuff for IE6.

Thanks for the customized example code, I will test it.

[..]

 

[Tuxedo]

Opacity has some issues in a cross-browser environment, notably

performance and different support in different browsers. Below is a
link to a discussion that you might find useful:

Yes, that highlights especially the performance issues.

I find that for small dimension images, eg. 300x250px, its less of a drag
for slower systems, while full screen image blending for example will be
off the limits on nearly all cases, including systems with very fast CPU's
and graphics.

Once I've managed to figure the decreasing opacity incrementing loop
construct I'll test with setInterval and compare with setTimeout, which
sound like a good tip from that discussion, too.

 

[Tuxedo]

Opacity has some issues in a cross-browser environment, notably

performance and different support in different browsers. Below is a
link to a discussion that you might find useful:

Yes, that highlights especially the performance issues.

I find that for small dimension images, eg. 300x250px, its less of a drag
for slower systems, while full screen image blending for example will be
off the limits on nearly all cases, including systems with very fast CPU's
and graphics.

Once I've managed to figure the increasing opacity incrementing loop
construct I'll test with setInterval and compare with setTimeout, which
sounds like a good tip from that discussion, too.