Calling all JavaScript Gurus - need animated hide/show help

[coryd218]

okay...currently i'm trying to create an animation for my content based on the link they select.

When the page loads, basically just my header, navigation and footer will be displayed. Say a user clicks the About link, I want the div that holds that content to display in a sliding motion, pushing down the footer.

Then when a user clicks on the portfolio link, i want the about div to slide up, and hide itself, and then I want the portfolio div to slide down.

I've been toying with it but am having no luck. I have the slide-in functionality, but the clicking of the links doesn't do what i want them to do.

Here's what i have so far:
http://www.corydorning.net/sandbox/index.html


Any help, ideas, suggestions, etc. is greatly appreciated. As a side note, i know i could use flash for this, but i'd like to see if it can be accomplished without it.

Thanks guys!

[coryd218]

no one?

is anyone here using Scriptaculous?

[RDM]

Scriptaculous will do this and they have some tutorials that will show you how.

[coryd218]

well...not quite.

i've used the script.aculo.us library before and have gotten many things to work. however, this effect doesn't exist in full.

they have the switchOff event, which is one part of what I want to use, but they don't have a switchOn event.

Does anyone familiar with scriptaculous know how i could reverse this script? here's the example of switchOff.

http://wiki.script.aculo.us/scriptaculous/show/Effect.SwitchOff


Here's what i have for the latest version:
www.corydorning.net

The slide up effect is buggy in IE7 it appears, so i think i'm going to switch to the blind effect instead of the slide effect. This is of course unless i can get the desired switchOff and a new switchOn effect.