CODEWITHSUNDEEP
javascriptjqueryajax
Vitor Reis
Vitor Reis

Reputation: 989

How to "animate" the transition between pages with jquery's .load()

I have this ajax site, with pages loading through load() but how do I add a transition? A simple FadeOut + FadeIn would be good already.

This is the code I'm using to load it (plus a loading indicator).

I want the current page (just container) fadeout and the new one arrives with fadeIn

$(document).ready(function() {
    $('a').click(function(event) {
        $("#container").append('<div id="loading">Loading...</div>');
        event.preventDefault();
        var url = $(this).attr('href');
        $('div#container').load(url, function() { $("#loading").fadeOut() });
    });
});

Upvotes: 3

Views: 11229

Answers (3)

jrode
jrode

Reputation: 411

If you're trying to fade the content in and out, it can be useful to animate the opacity attribute rather than fully fading the element out, to preserve the container height.

$(document).ready(function() {
    $('a').click(function(event) {
        $("#container").animate({'opacity': 0}, 200);
        event.preventDefault();
        var url = $(this).attr('href');
        $('div#container').load(url, function() {
            $(this).animate({'opacity': 1}, 200);
        });
    });
});

Upvotes: 3

Matt Ball
Matt Ball

Reputation: 359816

You need something a bit finer-grained than .load() so that you can do the fadeOut() before the new content is inserted:

$(function()
{
    var $container = $('#container');

    $('a').click(function()
    {
        $container.html('<div id="loading">Loading...</div>');

        var url = $(this).attr('href');

        $.get(url, function (data)
        {
            $("#loading").fadeOut(function()
            {
                // without this the DOM will contain multiple elements
                // with the same ID, which is bad.
                $(this).remove();

                $container.hide().html(data).fadeIn();
            });
        });

        return false;
    });
});

(Very basic) demo: http://jsfiddle.net/mattball/Cgqbx/

Upvotes: 4

daryl
daryl

Reputation: 15197

Make sure you have a html markup something along the lines of this:

<div id="container">
    <div id="content"></div>
</div>

css:

#loading { display:none }

Then with some simple jQuery you will be able to sort this out:

$(function() {
    $('a').click(function(e) {

        e.preventDefault();

        var url = $(this).attr('href');
        var content = $('#content');

        content.fadeOut(400, function() {

            $("#container").append('<div id="loading">Loading...</div>');

            var loading = $('#loading');

            loading.fadeIn(400, function() {
                content.load(url, function() { 
                    loading.fadeOut(400, function() {
                        $(this).remove();
                        content.fadeIn(400);
                    });
                });
            });   
        });
    });
});

Make sense?

edit: modified a little.

Upvotes: 0

Related Questions