Opacity number crunching loop?

Discussion in 'Javascript' started by Tuxedo, Feb 10, 2007.

  1. Tuxedo

    Tuxedo Guest

    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.
     
    Tuxedo, Feb 10, 2007
    #1
    1. Advertising

  2. Tuxedo

    Emmanuel Guest

    On Feb 10, 9:47 pm, Tuxedo <> wrote:
    > 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)
     
    Emmanuel, Feb 11, 2007
    #2
    1. Advertising

  3. Tuxedo

    RobG Guest

    On Feb 11, 6:47 am, Tuxedo <> wrote:
    > 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 >


    --
    Rob
     
    RobG, Feb 11, 2007
    #3
  4. Tuxedo

    Tuxedo Guest

    [..]

    > hand, I provide the additional stuff for IE6. :)


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

    [..]
     
    Tuxedo, Feb 11, 2007
    #4
  5. Tuxedo

    Tuxedo Guest

    > 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, Feb 11, 2007
    #5
  6. Tuxedo

    Tuxedo Guest

    > 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.
     
    Tuxedo, Feb 11, 2007
    #6
    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. Martin Ankerl

    EJB + number crunching

    Martin Ankerl, Aug 18, 2005, in forum: Java
    Replies:
    8
    Views:
    430
    Roedy Green
    Aug 23, 2005
  2. Shuo Xiang

    big number crunching in C

    Shuo Xiang, Sep 25, 2003, in forum: C Programming
    Replies:
    3
    Views:
    489
    Glen Herrmannsfeldt
    Sep 26, 2003
  3. Ted
    Replies:
    5
    Views:
    726
  4. Replies:
    21
    Views:
    1,810
    northerntechie
    Mar 26, 2008
  5. Richard Fairbanks

    Crunching Text Not Working in a Loop

    Richard Fairbanks, Aug 9, 2010, in forum: Ruby
    Replies:
    4
    Views:
    140
    Jesús Gabriel y Galán
    Aug 12, 2010
Loading...

Share This Page