Cross Fading Navigation with DHTML

Cross Fading Navigation with DHTML - The Fading Function
(Page 4 of 5 )


//=============================
function fader( objID, dir ) {
  var fade_index;



The first thing we need to do is make sure we’re not trying to fading in two directions at once. This is because the fader works by adding or subtracting from the objects opacity index until it reaches the limit. If we were going in two directions at once, we’d be adding and subtracting, which is basically like trying to walk forward with one leg, and backward with the other!


if ( inUse != '' && inUse != dir ) {
  return;
}



Next we just make sure they’ve passed the DHTML test, and let them see the fades. As browsers progress, we could add them to the list here. But until then, they just see the active navigation pop into view.


if ( ie5 || moz ) {



Let’s just set the direction placeholder to prevent the aforementioned situation.


inUse = dir;



Now let’s get the current opacity we’re working with. Notice for Explorer we get the opacity directly. But with Mozilla we must multiply by 100, as the index is a floating point number between 0 and 1.


if( ie5 ) {
  fade_index = getObject( objID ).filters.alpha.opacity;
}
if( moz ) {
  fade_index = getObject( objID ).style.MozOpacity * 100; 
}



Now we set the next opacity index, and the limit we want it to go to, based on the direction we’re fading in. We will use JavaScript’s ternary operator because it’s so nice and short. You could also use an if/else statement.

Currently I go up and down by 5’s, but you can modify this to get faster or slower fades.


fade_index  = dir == 'in' ? fade_index + 5 : fade_index - 5;
index_limit = dir == 'in' ? 100 : 0;



Now we do the actual fade. Remember that for Mozilla we have to return to the floating point number format, so divide by 100.


if( ie5 ) {
  getObject( objID ).filters.alpha.opacity = fade_index;
}
if( moz ) {
  getObject( objID ).style.MozOpacity = fade_index / 100; 
}



Now we set the time in milliseconds that we want to wait to fade more. You could also change this number to get longer/shorter fades. Right now it’s 20 milliseconds.

Last, but of course not least, we clear the placeholder and timer once we’ve reached the fade limit. At this point, we have a wonderfully faded object, so we can get on with our life.

NOTE There should be no carriage returns in your code for this portion.


  if( ( dir == 'in' && fade_index >= index_limit ) || ( dir == 'out' && fade_index <= index_limit ) ) {
    clearTimeout( goIn );
    inUse = '';
    }
  }
}



That’s it, really not too complicated; you just have to build in fail-safes so that we don’t end up trying to fade 3 objects in two different directions at once while patting your head and rubbing your stomach. This could create infinite recursion, and cause your CPU to run away screaming. Trust me, I learned the hard way.

If you copy and paste the code into your pages, you could get away with just adding your own navigation items, and changing the maxInt variable in swapNav().

blog comments powered by Disqus