Page transitions using JQuery?

I'm need to create a slide transition effect using JQuery when switching pages. However, I'm not entirely sure how to get started. Can 开发者_如何学运维somebody point me in the right direction? If there is already an existing plugin that does this, can you point that out as well?

Thanks!

---

jQuery Mobile is a well supported library that does this sort of thing. That would be a good place to look, and might even do what you need to do.

---

Here is a very very simple solution. It keeps the pages you are wanting to cycle through in an array and the get next/prev links will just go through them.

HTML:

<a href = '#' id = 'getPrev'>Get Prev</a>
<div id = 'contentArea'></div>
<a href = '#' id = 'getNext'>Get Next</a>

jQuery:

var pages = array( "one.html", "two.html", "three.html" );
var curPage = 0;

$(function() {
    $("#getPrev").bind("click", function() {
        $("#contentArea").fadeOut();
        curPage--;
        if(curPage < 0) curPage = pages.length-1
        fetchPage(pages[curPage]);
    });
});

function fetchPage(page) {
    $.ajax({
        type: "GET",
        url: page,
        success: function(html) {
            $("#contentArea").html(html).fadeIn();
        }, 
        error: function(a,b,c) {  $("#contentArea").html("An Error Occured.").fadeIn(); }
    });
}

The binding for 'getNext' link would be similar, except the direction you are going in.