views:

581

answers:

1

I use the following to load a new page within the current page, no refresh.

$(document).ready(function(){
$("#leftnav").click(function(){
    $.post("regions.php",function(data){document.write(data)},"html")
    return false;
});

});

Is it possible to animate the new page with jquery, like slide up the new page?

Thanks,

+3  A: 

The following will add the new content to a hidden div, append to the body and then slideDown.

$(document).ready(function(){
    $("#leftnav").click(function(){
        $.post("regions.php",function(data){
            //create a div and hide it
            //append new content then slideDown  
            $('<div />').hide()
                        .html(data)
                        .appendTo('body')
                        .slideDown()
        return false;
    });
});
redsquare
Thanks for the reply. I need the head as javascript changes between pages. So pretty much everthing in between the html tags. Im thinking this isn't possible.
better to move the js into a separate js file then you will have the ability to call an init function for the new content.
redsquare
see http://paulirish.com/2009/markup-based-unobtrusive-comprehensive-dom-ready-execution/ for an idea to get you going
redsquare
Great, Thanks again