CODEWITHSUNDEEP
jqueryanimationonclick
mrcollioni
mrcollioni

Reputation: 15

slide div offscreen, append content with ajax call, slide div onscreen

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.

Upvotes: 1

Views: 2727

Answers (2)

mrcollioni
mrcollioni

Reputation: 15

Looking more closely at the original example I posted, and at @Blazemonger's answer, the following seems to achieve the desired result:

  1. Load random.php into #box1:

    randomEntry = function() {
    $.ajaxSetup({
    cache: false
    });
    $('#box1').load('random.php');
};http://www.readability.com/mrfredhale/

  2. Move #box1 off-screen when clicked

    animateBox = function() {
    $('.box').click(function() {
        $(this).animate({
            left: '-50%'
        }, 500, function() {
            $(this).css('left', '150%');
            $(this).appendTo('article#portraits');
        });

  3. Load random.php into #box2 and move it on-screen. Using $(this.next) means that when #box2 is in focus random.php loads into #box1, and vice versa. 

        $(this).next().load('random.php').animate({
        left: '50%'
    }, 500);
    });
};

Upvotes: 0

Blazemonger
Blazemonger

Reputation: 92893

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);
        );
    );
};

Upvotes: 1

Related Questions