jQuery to cross fade between 2 pages

Using jQuery, is there a way to cross fade two pages?  Meaning if I go from page 1 to page 2 they cross fade to the next instead of an abrupt change?  Is there an example?
LVL 8
rgranlundAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chris StanyonWebDevCommented:
AFAIK that's not possible with the standard request / response. You could potentially do it if you have a single page website, in which case you never switch pages - you just load different content into the same page, but I can't imagine it being a particularly smooth operation.
rgranlundAuthor Commented:
What the deal is, I have two forms on a page (Code Ignitor)  And they both won't work.  If there is code to open and close a form, the second for won't open its open and code close. How can you get two open and close form tags to work in CI?  The reason I ask about the code fade is because that is the animation on the page. It fades from one section to another.  

I also noticed that the tag does appear if I change the url to the correct method in the controller. So maybe a better question is, how do I change the url (add to it) without changing the page?
Chris StanyonWebDevCommented:
Not entirely sure what you're after, and don't really understand what you mean by open and close a form.

You can have as many forms on a page as necessary, and the easiest way to deal with them may be to hook them up to an AJAX request. This way, each form can be posted without ever have to leave the page.

Just because you're using CodeIgniter shouldn't make a difference - CodeIgniter views are just html pages with some added functionality (you can use the built-in form helper is you want).
Julian HansenCommented:
You can fake it.
Capture the event that triggers the change (click on an <a> element for instance)

Three options (in no particular order)

Fade the page out - when it completes redirect the page.
On the landing page - hide the page by default.
On page load fade it in.

The other (better) way to do it is to load your pages with AJAX - fade it out on the select.
AJAX request the new page and fade it in when it arrives.

Third option - both pages are downloaded at the same time. A click fades out the one <section> and fades in the second.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.