Animation question to professionals

Animation question to professionals

Hello all,

I have a little general question about to handle two animated pages which I’d like to combine.
For I am a relative beginner this time I’d like to hear some advice and ideas BEFORE I start programming what I have in mind.

If you’d have the patience to take a look at the 2 html in action (yet very unfinished, but as I said I would want to become clear on which basic way to succeed):

If you click on the first one the arrow in the right corner on the bottom I did a blind effect with Jquery UI (maybe this is not the final word also, maybe it could be done with a simpler overflow invisible div that contains all content).
After this „blind” fade effect I would like to let the second page appear moved also fromm down to up simultaneously.

I hope it’s clear what I attempt to do.
Click on the arrow bottom and the second pages content appears from below.
Yet could be that after a while the contents of each page will get more complicated and so I would avoid to be unflexible (and to put things in tiny divs each animated etc.).

First thing that came in mind to me was Iframes, but I read in many places that it is not particularly wise to do so.
Another vague (beginner) idea would be to insert the new html content after the effect via Jquery dynamically, i.e. if the effect is done (or while better) the first content has to cancelled the second appended via a .html operation.

Am I totally wrong here or which way would you go?
Would be a great help to know your opinions before starting a (for me) difficult scripting.