slide between pages using jQuery

Question

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.

Kellikellia

What do you mean you don't want to use an ID? you mean you want the actual transition to happen on loading a new html page? – Edmundoedmunds

Exactly @AndresIlich. The answer by jose below shows the effect in action but uses IDs and not actual html pages. Any ideas? – Kellikellia

Answer 1

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();
    });

});

Comeback

Answer 2

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.

Accordion