going crazy from crossfading divs

[patrick99e99]

hi everyone...

I have spent the last 5 hours trying to create a script that crossfades between two divs, and I am at a total loss for why it's not working properly. The visibility of the current_div is not being set, even though it is being set... and I can't understand why. If anyone can help me, that would be fantastic.

-patrick

 

[nickdel]

Patrick, you haven't set any dimensions for your outer div "cf_element". Add some height and width and you should start to see something happening!

Cheers

Nick

 

[patrick99e99]

Hi Nick,

Actually that's not the "problem".. Though you're right, IE wasn't displaying anything because of that.

The actual problem I am having is the "current_div" is not showing up. I am only seeing "previous_div" appear abruptly at 100% and go down to 0%... I've looked over my code a thousand times, and I just can't see what the problem is...

-patrick

 

[patrick99e99]

weird.. I got it working, but I don't understand why.

Originally I had:

function startCrossfade()
{  
   active = true;

   // show current div
   document.getElementById(divs[current_div]).style.visibility = "visible";

   // fade in & out current and previous div by increment
   fade_loop = setInterval("fadeInout();",fade_delay);

 if (opacity_level == 100)
   {
      // stop incrementing fade
      clearInterval(fade_loop);

      // reset values and hide previous div
      opacity_level = 0;
      opacity_level2 = 100;
      document.getElementById(divs[previous_div]).style.visibility = "hidden";
   
      // get next div
      previous_div = current_div;

      if (current_div == (div_length - 1))
      {
         current_div=0;
      }
      else
      {
         current_div++;
      }

   }

and I rearranged it to read:

function startCrossfade()
{  
   active = true;

   // show current div
   document.getElementById(divs[current_div]).style.visibility = "visible";

   if (opacity_level == 100)
   {
      // stop incrementing fade
      clearInterval(fade_loop);

      // reset values and hide previous div
      opacity_level = 0;
      opacity_level2 = 100;
      document.getElementById(divs[previous_div]).style.visibility = "hidden";
   
      // get next div
      previous_div = current_div;

      if (current_div == (div_length - 1))
      {
         current_div=0;
      }
      else
      {
         current_div++;
      }

   }
   else
   {
   // fade in & out current and previous div by increment
   fade_loop = setInterval("fadeInout();",fade_delay);
   }
}

and it now works.. And that to me is exactly the same as the way it was before--- So I am totally confused why it works this way and not the other.

-patrick

 

[patrick99e99]

Ok actually I think I figured this out... For some reason, I was confused and thinking some of this was in a loop when it actually wasn't.. So, it's all good now.

-patrick