Question

I have a div which is centred on the page that contains text loaded through an jquery ajax call. When a button is clicked it refreshes the content of that DIV:

randomEntry = function() {
    $.ajaxSetup({
        cache: false
    });

    $('article#portraits').load('random.php');
    $('#refresh').click(function() {
        event.preventDefault();
        $('article#portraits').load('random.php');
    });
};​

What I would now like to do is animate the div when the button is pressed, in the following order:

1. button is pressed
2. div moves off screen from right to left
3. div content is updated
4. div with new content moves on screen from right to left.

This example illustrates the visual effect perfectly. I have looked at the code and am able to replicate the effect with two divs, each containing unique content, but am struggling to load the ajax call into the second div.

This is what I have so far – it’s clearly incorrect, as the new content loads before the div begins to move (and doesn’t come back!):

$('#refresh').click(function() {
    event.preventDefault();
    $('article#portraits').animate({ 'margin-left' : "-100%" },1500);
    $('article#portraits').load('random.php');
    $('article#portraits').animate({ 'margin-right': "-100%" }, 1500);
};

I suspect load() isn’t the right function here, and that perhaps there needs to be a second empty div to load the content into, but I’m a bit stumped. A jsfiddle with the html/css can be found here. Many thanks.

Answer 1

You need to use the “complete” callbacks:

$('#refresh').click(function() {
    event.preventDefault();
    $('article#portraits').animate({ 'margin-left' : "-100%" },1500, function() {
        $('article#portraits').load('random.php', function() {
            $('article#portraits').animate({ 'margin-right': "-100%" }, 1500);
        );
    );
};