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

Basically, if you want to do a transition, you must already have the HTML of what you want to load. Since the callback of .load() already changes the DOM, you must get it in another way. AJAX is useful here.

Working Example: http://jsfiddle.net/v6S8Z/3/

$('#loader').click(function(){
    $.ajax({
        type: 'get',
        url: 'http://fiddle.jshell.net',
        success: function(response){
            $('#main').fadeOut(function(){
                $('#main').html(''); // clear the contents - do not chain this with the next .html()
                $('#main').html(response); // add new contents - do not chain the next hide() as the element must be parsed in the DOM correctly first
                $('#main').hide().fadeIn(6000); // hide the added content, then fade in
            });
        }

    });
});

• load the page via ajax on click
• fade out the existing content as soon as ajax is finished
• the .html() sets the content, and immediately hides the pages
• .fadeIn() fades in the page slowly.

This should basically be it. I'm currently working, so I can't give you a detailed example with proper setup pages. But I think you get the idea.

If, however, you want to CROSS-fade the contents in (optically) the SAME Div, (e.g. content A fades from 100 to 0 WHILE content B fades from 0 to 100) there is no other way but to build the HTML accordingly. You will have to use 2 different 'main' wrappers lying on top of each other. And you will have to set the z-index on each load so the text-selection keeps working.

Hope this gets you going. :)

I would really recommend building the page statically at first, with 2 content div's on top of each other, fading one into another. This is hard enough anyway, especially if you are not well-settled in JS and CSS. But as soon as you got that working properly, you can simply populate the 2 divs with .load() and use your existing transition code.

best regards

Answer 2

You're going to want $(document).ready() if you are trying to do something after the page is done loading.

http://api.jquery.com/ready/

The reason you use ready() and not load() is that, load() occurs when the html is parsed, but before the Document Object Model (DOM) is ready, which is what JS relies on to manipulate the page (DOM) content. So you attach to ready() when you want to adjust what the browser presents, for instance to manipulate the actual content (add/remove/manipulate elements/classes/structure, initialize lightbox and other plugins, do effects, etc...).

So, what I think you are describing is:

$(document).ready(function(){
    $('a.clickaffected').each(function(){
        $(this).fadeIn();
    });
});

EDIT: You want to do a callback function:

$(document).ready(function(){ 
    // load home.html page when the page loads
    $("#main_content_inner").load("onmouseclick.html");
    $("#latest").click(function(){ // load page1 on click
        $("#main_content_inner").hide();
        $("#main_content_inner").load("testscript.html", function(){
            $(this).fadeIn(5000);
        });
    });
});

And from your answer:

$(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").hide();
        $("#main_content_inner").load("page1.html", function(){
            $(this).fadeIn(5000);
        });
    });
    $("#page2").click(function(){
        // load page2 in main_content_inner on click
        $("#main_content_inner").hide();
        $("#main_content_inner").load("page2.html", function(){
            $(this).fadeIn(5000);
        });
    });
    $("#page3").click(function(){
        // load page3 in main_content_inner on click
        $("#content").hide();
        $("#content").load("page3.html", function(){
            $(this).fadeIn(5000);
        });
    });
});

Note, you can chain function calls as lolwut demonstrates, but I'm not sure you can do that without waiting for load to do your animation. So I'm not sure $('#id').hide().load().fadeIn() would work in case a page loaded slowly, but $('#id').hide().load(url,[callback w/fadeIn()]) does wait for page to fully load before fadeIn() fires.

EDIT 2:

Due to the original poster's stated problem getting the code to work, I created an html file that I include below, with page#.html's created for each. The posted html page below works as I've tested with jquery 1.4.4.

<html>
<head>
<style type="text/css">
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript">

$(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").hide();
        $("#main_content_inner").load("page1.html", function(){
            $(this).fadeIn(5000);
        });
    });
    $("#page2").click(function(){
        // load page2 in main_content_inner on click
        $("#main_content_inner").hide();
        $("#main_content_inner").load("page2.html", function(){
            $(this).fadeIn(5000);
        });
    });
    $("#page3").click(function(){
        // load page3 in main_content_inner on click
        $("#content").hide();
        $("#content").load("page3.html", function(){
            $(this).fadeIn(5000);
        });
    });
});

</script>

</head>
<body>
<span id="page1">Page 1</span>
<span id="page2">Page 2</span>
<span id="page3">Page 3</span>
<h4>Main Content Inner</h4>
<div id="main_content_inner"></div>
<h4>Content</h4>
<div id="content"></div>
</body>
</html>

Answer 3

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