I could copy and paste the opening paragraph from what I wrote about sliding DIVs -- more ranting about this versus Flash -- but hey, I used it myself in the filter.junkie section, just to say I did. What the hell.

For this one, I started with the Cross-browser BlendTrans FIlter script at brainerror.net. This fella has written a bunch of stuff about his work there, so I won't repeat it.

As usual, I figured out that I wanted to do something a bit different with it, so I've extended it out a bit. Primarily, the issue I had was with throwing multiple DIVs over each other and having links function internally; the layers don't actually go away.

Here's a working baseline example of the existing stuff. [There's a lot more to it, but this was the bit I wanted at first]:

show/hide

Although the author gives a 'blendimage' function, you have to pull off some real CSS nastiness, including having a duplicated image over a background. So I created some more functions -- specifically one to remove all arrayed items opacity, one to toggle multiple opacities, one to clear the stack and support for the array. Alas, for my version absolute positioning works best so please see the 'simple example'. There are three things of note. First, it's powered by the same type of array as the slide function:

whichdivs = new Array("div_x","div_y");
var thismany = whichdivs.length - 1;

Second, you'll need this function at the bottom of your code:

<script type='text/javascript' language='JavaScript'>opacityOff();</script>

And finally, a call looks like this:

<a href="javascript:shiftMultiple('div_x', 500)">div_x</a>

...where the first var is the name of the div to toggle and the second is the number of milliseconds to fade it over.

• For this version, I really recommend absolutes.
• So far as I can tell, seems to work in everything current.
• Remember to watch setting opacity in the CSS.