Jquery – slide between pages using jQuery


I have a 4 page website and I want to transition between the 4 pages with a slide effect. I don't want to do this using an #ID. I want to press a button or the link to slide to the next page. I know this can be done using jQuery and I've seen websites that do this. Please help out. Thanks in advance for all suggestions, criticisms, and comments.

Best Solution

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

        //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