Results 1 to 4 of 4

Thread: Crossfader

  1. #1
    Join Date
    Feb 2007
    Location
    🌎
    Posts
    528
    Thanks
    10
    Thanked 10 Times in 10 Posts
    Blog Entries
    2

    Default Crossfader

    I have a simple situation - I need to crossfade between four absolutely-positioned DIVs. None of the crossfader scripts I could find online did what I needed, so I tried to write my own. This is what I ended up with:

    Code:
    var currentopacity = new Array(1,0,0,0);
    var increments = 0;
    function fade(e1,e2){ //fade between e1 and e2
        if (increments < 1000) {
            currentopacity[e1] -= 0.001;
            currentopacity[e2] += 0.001;
            document.getElementById('fade'+e1).style = 'opacity: ' + currentopacity[e1] + '; z-index: 2;';
            document.getElementById('fade'+e2).style = 'opacity: ' + currentopacity[e2] + '; z-index: 3;';
            increments++;
        }
        else {
            increments = 0;
        }
        window.setTimeout(fade,1,e1,e2);
    }
    function startfade() { //start fading.
        window.setTimeout(fade,5000,0,1);
        window.setTimeout(fade,10000,1,2);
        window.setTimeout(fade,15000,2,3);
        window.setTimeout(fade,20000,3,0);
        window.setTimeout(startfade,20000);
    }
    The DIVs are then set up later in the page and the startfade() function called:
    HTML Code:
    <div id="fade0" class="fader" style="opacity: 1; z-index: 3;">DIV CONTENT 1</div>
      <div id="fade1" class="fader" style="opacity: 0; z-index: 2;">DIV CONTENT 2</div>
      <div id="fade2" class="fader" style="opacity: 0; z-index: 2;">DIV CONTENT 3</div>
      <div id="fade3" class="fader" style="opacity: 0; z-index: 2;">DIV CONTENT 4</div>
     <script type="text/javascript">
        startfade();
    </script>
    The CSS for the fader class is as follows:
    Code:
    .fader{
        position: absolute;
        left: 34%;
        top: 100px;
        height: 100px;
        width: 33%;
        border-bottom-left-radius: 8px;
    }
    As you may guess, it doesn't work. The fade0 DIV just sits there, not doing anything.

    Why doesn't it work?

    Edit: Live example: http://wooftalk.net/fmnas
    ....(o_ Penguins
    .---/(o_- techno_racing
    +(---//\-' in
    .+(_)--(_)' The McMurdo 500

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    .fader{
        position: absolute;
        left: 34%;
        top: 100px;
        height: 100px;
        width: 33%;
        border-bottom-left-radius: 8px;
    }
    /*]]>*/
    </style>
    <script type="text/javascript">
    /*<![CDATA[*/
    var currentopacity = [1,0,0,0];
    
    function fade(e1,e2){ //fade between e1 and e2
        if (currentopacity[e1] >0) {
            currentopacity[e1] -= 0.005;
            currentopacity[e2] += 0.005;
            document.getElementById('fade'+e1).style.opacity=currentopacity[e1];
            document.getElementById('fade'+e1).style.zIndex='2';
            document.getElementById('fade'+e2).style.opacity=currentopacity[e2];
            document.getElementById('fade'+e2).style.zIndex='3';
        window.setTimeout(function(){ fade(e1,e2); },10);
        }
        else {
            currentopacity[e1] = 0;
            currentopacity[e2] = 1;
        }
    }
    function startfade() { //start fading.
        window.setTimeout(function(){ fade(0,1); },5000);
        window.setTimeout(function(){ fade(1,2); },10000);
        window.setTimeout(function(){ fade(2,3); },15000);
        window.setTimeout(function(){ fade(3,0); },20000);
        window.setTimeout(function(){ startfade(2,3); },20000);
    }
    
    
    
    /*]]>*/
    </script>
    </head>
    
    <body>
    <div id="fade0" class="fader" style="opacity: 1; z-index: 3;">DIV CONTENT 1</div>
      <div id="fade1" class="fader" style="opacity: 0; z-index: 2;">DIV CONTENT 2</div>
      <div id="fade2" class="fader" style="opacity: 0; z-index: 2;">DIV CONTENT 3</div>
      <div id="fade3" class="fader" style="opacity: 0; z-index: 2;">DIV CONTENT 4</div>
     <script type="text/javascript">
        startfade();
    </script>
    </body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. The Following User Says Thank You to vwphillips For This Useful Post:

    techno_race (10-15-2010)

  4. #3
    Join Date
    Feb 2007
    Location
    🌎
    Posts
    528
    Thanks
    10
    Thanked 10 Times in 10 Posts
    Blog Entries
    2

    Default

    Ah. Okay. I thought something was strange with the way I was calling setTimeout.

    However, the script still doesn't work. It still only shows the first element, and none of the other ones.
    Last edited by techno_race; 10-15-2010 at 09:33 PM.
    ....(o_ Penguins
    .---/(o_- techno_racing
    +(---//\-' in
    .+(_)--(_)' The McMurdo 500

  5. #4
    Join Date
    Feb 2007
    Location
    🌎
    Posts
    528
    Thanks
    10
    Thanked 10 Times in 10 Posts
    Blog Entries
    2

    Default

    Never mind, it was a problem with something else; it works now.
    ....(o_ Penguins
    .---/(o_- techno_racing
    +(---//\-' in
    .+(_)--(_)' The McMurdo 500

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •