slide between pages using jQuery

Check out this tutorial and example http://www.queness.com/post/356/create-a-vertical-horizontal-and-diagonal-sliding-content-website-with-jquery

Basically, you have to set your CSS and HTML to have all the panels/screens you want as divs - rows and columns.

Then set a selector for each panel and bind a click event [Code from link].

$(document).ready(function() {

    //get all link with class panel
    $('a.panel').click(function () {

                //reset and highlight the clicked link
        $('a.panel').removeClass('selected');
        $(this).addClass('selected');

        //grab the current item, to be used in resize function
        current = $(this);

                //scroll it to the destination
        $('#wrapper').scrollTo($(this).attr('href'), 800);      

                //cancel the link default behavior
        return false;
    });


    //resize all the items according to the new browser size
    $(window).resize(function () {

        //call the resizePanel function
        resizePanel();
    });

});

I suggest using jQuery to slide your content off the screen, after that is done use AJAX to refresh the content to your new page. Set the content to the other side of the screen and use jQuery again to slide it in from that side.

Something like this...

<div id='wrapper'> // this has a set width and overflow hidden
  <div id='content'>
    your content
  </div>
</div>

A user clicks on a link, animate the margin of 'content' so it goes off the page. Do your AJAX-ing, position the 'content' to the other side of the page (far enough so you can't see it), animate the margin so it will slide into view.