looped and timed javascipt fade of multiple div's in order

**valta** · Mar 10, 2011 15:13

Hi,
I've found this great script but I was unable to change it to fit my needs. What this script does is it fades the box to opacity .3 on click of the btn and back to 1.0 when click again. What I need is for 4 or 5 divs to fade one after the other as soon as the page loads. So no more "go" button, all images are set to an initial opacity of .3 and one after the other they go to 1.0, stay there for 3 seconds, then go back to .3.

Here's the script I found.
Thanks in advance for the help.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="texthtml;charset=utf-8" />
<script type="text/javascript">
var TimeToFade = 1000.0;

function fade(eid)
{
var element = document.getElementById(eid);
if(element == null)
return;

if(element.FadeState == null)
{
if(element.style.opacity == null
|| element.style.opacity == ''
|| element.style.opacity == '1')
{
element.FadeState = 2;
}
else
{
element.FadeState = -2;
}
}

if(element.FadeState == 1 || element.FadeState == -1)
{
element.FadeState = element.FadeState == 1 ? -1 : 1;
element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
}
else
{
element.FadeState = element.FadeState == 2 ? -1 : 1;
element.FadeTimeLeft = TimeToFade;
setTimeout("animateFade(" + new Date().getTime() + ",'" + eid + "')", 33);
}
}

function animateFade(lastTick, eid)
{
var curTick = new Date().getTime();
var elapsedTicks = curTick - lastTick;

var element = document.getElementById(eid);

if(element.FadeTimeLeft <= elapsedTicks)
{
element.style.opacity = element.FadeState == 1 ? '1' : '0.3';
element.style.filter = 'alpha(opacity = '
+ (element.FadeState == 1 ? '100' : '30') + ')';
element.FadeState = element.FadeState == 1 ? 2 : -2;
return;
}

element.FadeTimeLeft -= elapsedTicks;
var newOpVal = element.FadeTimeLeft/TimeToFade;
if(element.FadeState == 1)
newOpVal = 1 - newOpVal;

newOpVal = newOpVal/2 + 0.3;
element.style.opacity = newOpVal;
element.style.filter =
'alpha(opacity = ' + (newOpVal*100) + ')';

setTimeout("animateFade(" + curTick + ",'" + eid + "')", 33);
}

</script>

</head>
<body onload="fade('fadeBlock');">

<div id="fadeBlock" style="background-color:Lime;width:250px;
height:65px;text-align:center;">
<br />
I'm Some Text
</div>
<br />
<br />
<input type="button" onclick="fade('fadeBlock');" value="Go" />

</body>
</html>

**AllanP** · Mar 11, 2011 00:25

Here is a script that does what you want. It is not your original script, but it works in all browsers. You can change the dwell times at the top of the script.

Code :

<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Fade divs</title>
<script type="text/javascript">
<!--
// opacity value is 0-1 for non-IE and 0-100 for IE
 var count=0, tOut=null, stepF=2, fadeTop=100, fadeBot=30, final=false, aPause=1000, fadePause=50; // global 
//
 function startChange()
  {  clearTimeout(tOut);
     ++count;
     if(count >=((fadeTop-fadeBot)/stepF)+1)
      { if(final==false)
          { // after increasing opacity, now decrease after 3sec
               increasing=false; count=0; final=true;
               tOut=setTimeout(startChange,aPause)     // wait 3 sec
               return; 
          } 
        else
          { // move to next div
              ++currentDivRef;
              if(currentDivRef<allTopDivs.length)
                { increasing=true; currentOpacity=fadeBot; count=0; final=false;
                  tOut=setTimeout(startChange,aPause);
                }  
               return;           
            } 
       }       
         // change opacity of target div
           currentOpacity=(increasing==true)? currentOpacity+stepF : currentOpacity-stepF;           
           if(increasing==true)
             { currentOpacity=(currentOpacity >=fadeTop)?fadeTop : currentOpacity; }
           else
             { currentOpacity=(currentOpacity <=fadeBot)?fadeBot : currentOpacity; }
               if(isIE==true)
                { allTopDivs[currentDivRef].style.filter = 'alpha(opacity='+currentOpacity+')'; }  // IE opacity value reqd is 0-100
               else 
                 { allTopDivs[currentDivRef].style.opacity = currentOpacity/100;  }    // not IE  opacity value reqd is 0-1
            //     
               tOut=setTimeout(startChange,fadePause)           
  }   
// ------------------ end of startChange() -------------------------------------
//
var allTopDivs=new Array(), isIE=false, currentDivRef, currentOpacity, increasing; // global
window.onload=function(){
 // get div object refs
   var allDivs=document.getElementsByTagName("div");
   var i;
  // collect divs with class topDivs 
   for(i=0;i<allDivs.length;i++)
    { if(allDivs[i].className=="topDivs"){ allTopDivs[allTopDivs.length]=allDivs[i]; }  
     }         
// check for user agent type. IE first
   if(typeof allTopDivs[0].style.opacity=="undefined" && navigator.userAgent.indexOf("MSIE")!= -1)      // check for IE  
     { // IE opacity value reqd is 0-100
     // set initial opacity for all divs
      for(i=0;i<allTopDivs.length;i++){ allTopDivs[i].style.filter = 'alpha(opacity=30)'; }    // visible 30%
      isIE=true;                                       // flag IE as browser
     }
    else if(typeof allTopDivs[0].style.opacity=="string" && navigator.userAgent.indexOf("MSIE")== -1)    // check for not IE
     { // not IE  opacity value reqd is 0.0-1.0
      // set initial opacity for both divs
       for(i=0;i<allTopDivs.length;i++){ allTopDivs[i].style.opacity = 0.3; }    // visible 30%
       isIE=false;                                   // flag IE is not browser
     }
  // start opacity change for first div. currentDivRef is index value in allTopDivs array 
    currentDivRef=0;  
  // use IE method and change later  
    currentOpacity=30; 
  // start by increasing opacity   
    increasing=true;
  // start timeout  
    tOut=setTimeout(startChange,aPause)
 }
//-->
</script>
<style type="text/css">
<!--
.topDivs { float:left; margin:5px ; width:100px; height:100px; border:2px solid #000; } 
#d1 { background-color:#F00; }
#d2 { background-color:#0F0; }
#d3 { background-color:#00F; }
#d4 { background-color:#FF0; }
#d5 { background-color:#F0F; }
 
-->
</style>
</head>
 
<body>
 
<div id="d1" class="topDivs">
</div>
<div id="d2" class="topDivs">
</div>
<div id="d3" class="topDivs">
</div>
<div id="d4" class="topDivs">
</div>
<div id="d5" class="topDivs">
</div>
 
</body>
 
</html>

User Tag List

Thread: looped and timed javascipt fade of multiple div's in order

Thread Tools

Display

looped and timed javascipt fade of multiple div's in order

Bookmarks

Bookmarks

Posting Permissions