Question

Can someone give me a bit more information about how this achieved. When you go from one page to another, the content greys out, then there is a pause while the content loads, then the content is replaced with the new content and you are taken to the top of the page.

I want to achieve the same effect for my site, so I wondered if I had the steps right:

• User clicks on “next page”.
• Div containing content becomes semi-transparent using Jquery
• New content is pulled in using Ajax and replaces current content
• Scroll to top of the page using “scroll-to”

Am I on the right track? Can anyone provide a bit more information to get me started?

Answer 1

I think you’re mixing up 2 possibilites.

1. Very rudimentary, if you are facing major load times between pages, you could, like you say, display a box saying “Please wait while the next page loads”. When it does, the browser will switch over to the new page.
   However, in light of people using tabbed browsing and such, I would suggest against it, as it breaks the previous page. If you opened the link in a new tab, you would have to reload the previous page once you get back to it.

2. If you use Ajax, the browser will not switch pages; only the page content will be swapped out. And similarly, you can add a “Loading”-box to the page until the new HTML content is received.

EDIT
As per your question, here’s an example:

$("#contents").ajaxStart(function() { 

    $(this).fadeTo("slow", 0.33);

});