Is it possible to use jQuery create a page transition with a div preloaded so that there is no flicker between loads?

Question

Here's the situation: I'm working on a site where the navigation is located on the bottom of the page on the home page, but on the top of the page for all other pages. I've set up some jQuery so that when a link is clicked to any of the subpages, the navigation will slide up to the position is is located on all other pages prior to transitioning to the next page (and also makes a few small styling tweaks to make it match up perfectly). Just this:

$('#nav a').click(function(){ 
  var url = $(this).attr('href'); //save the url
  $('#top-container').removeClass('home-top-container'); //remove the special home page styles
  $('img').slideUp('slow', function(){ //slide up the main image-- this places the nav at the exact position of all interior pages
    document.location.href = url; //when it's finished, proceed to the page
  });
  return false;
});

It would be a perfect "look" except for the fact that, of course, there's a little bit of page load time between the page transitions, so the navigation disappears then reappears for a second, just like you'd expect. But it's really distracting since your eye is already focused on the nav that was just moving around.

So, what I'm wondering is if there's any way to use jQuery to seek out that #nav div in the destination page and preload it prior to to moving on to that page (so that there's no flicker)? Or any other way to keep the nav displaying without interruption during the transition?

I have a feeling that I'm asking for the impossible. But it's worth asking, at least.

---

ETA: Here's an example link for the site: http://www.studioal.com/sample/ Click on "WORK" (it's the only working link)

I'd prefer not to fade in and out, as I'd love to have the navigation remain at 100% through the full transition (I think that will be easier to understand once seeing the example).

Answer 1

You should look into using AJAX to load your page in the background then fading out the current content and fading in the new content that was loaded.