jquery load html with ajax and let it slide in your page

Question

I'm making a webapge, and i need to load an html page in my home page with a clicking event. that is working fine.

my question is, is it possible to let the incoming html page to slide in the homepage?

i'm loading the html page with the following:

$.ajax({
    url: "gegarandeerd.html",
    dataType: "html",
    success: function(data) {
        $("#content").html(data);
    }
});​

how can i make the loaded data, slide in the page?

Answer 1

This effect looks good.

$.ajax({
    url: "gegarandeerd.html",
    dataType: "html",
    success: function(data) {
        $("#content").fadeOut(function() {
            $(this).html(data).slideDown();
        });
    }
});​

The old content is fading out and the new content is sliding down.

DEMO: http://jsfiddle.net/2yJhc/