Slide between pages using jQuery

Question

I have a 4 page website and I want to go between 4 pages with a slide effect. I do not want to do this with #ID. I want to click a button or link to go to the next page. I know this can be done using jQuery, and I have seen websites that do this. Please, help. Thanks in advance for all suggestions, criticism and comments.

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 should set CSS and HTML for all panels / screens that you want to use as divs - rows and columns.

Then set the selector for each panel and attach the 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(); }); }); 

Answer 2

I suggest using jQuery to populate the content on the screen, then use AJAX to refresh the content on your new page. Set the content to the other side of the screen and use jQuery again to move it from that side.

Something like that...

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

The user clicks on the link, animates the "content" field so that he moves away from the page. Make your AJAX-ing, place the “content” on the other side of the page (far enough so that you cannot see it), animate the field so that it is slippery.