jQuery和Ajax动态加载新页面

Question

I am attempting to create a static microsite that has a list of pages. I have a main file 'index.php' with a list of links like the following:

<a href="/pages/page1.php">Go to page 1</a>

<a href="/pages/page2.php">Go to page 2</a>

What I'm trying to do is something like ( http://voiceandtone.com/ ) where when you click on a page it fades-out the current page you are on and animates in the new page without refreshing the page.

Does anyone know how I can achieve this or if there are any great tutorials out there that can help me?

Answer 1

Maybe somethig like this ?

$(document).ready(function() {
    $("a").click(function() {
         $('#result').load("http://domain.com" + $(this).attr('href'), function(){
            // Stuff to do after the page is loaded
         });
    });
});

here is documentation http://api.jquery.com/load/

Answer 2

The answer is Ajax. You can use either the GET or POST method to achieve your task.