JQuery:Can you add transition effects to .load

Question

im slowly progressing with my work, continuously trying different approaches.

quick question...

is it possible to add jquery animation effects like .fadein .fadeout .slideup .slidedown etc to a onclick .load.

at the moment when i click a link the page just loads up in my designated area but i am not sure how to tie an effect to this .load.

any suggestions?

EDIT: Code example:

$(document).ready(function(){ 
    // load home page when the page loads
    $("#main_content_inner").load("home.html");

    $("#page1").click(function(){
        // load page1 in main_content_inner on click
        $("#main_content_inner").load("page1.html");
    });
    $("#page2").click(function(){
        // load page2 in main_content_inner on click
        $("#main_content_inner").load("page2.html");
    });
    $("#page3").click(function(){
        // load page3 in main_content_inner on click
        $("#content").load("page3.html");
    });
});

EDIT: Snippet from HTML file:

//where the page should be shown

    <div id="main_content_inner">
        <h1>
            Main Content
        </h1>
    </div>

//the side bar menu where user chooses page

            <ul id="sidebar_menu">

            <p><li id="page1"> page1</li></p>

            <p><li id="page2"> page2</li></p>

            <p><li id="page3"> page3</li></p>

          </ul>

this code currently loads the html docs in my designated div on my main page. i want to do this but with a transition.

i chose to load the whole html document as opposed to loading specific content from the document because i found when i included javascript in the specific content of the document, then tried to load it on my main page, the javascript(being twitter tweets) wouldnt show. but when i opened the html file seperately it would work fine, so it seemed ajax would load the javascript into my content div on the main page.

any suggestions on making this code more practical for my needs etc...im open to criticism and especially suggestions as it is all about learning.

thanks

Answer 1

$('.element').click(function()
{
    $('.load').load('url').hide().fadeIn('slow');
});