jQuery to cross fade between 2 pages

Robert Granlund
Robert Granlund used Ask the Experts™
on
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?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
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.

Author

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?
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
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).
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
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.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial