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

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

您需要使用“完整” 回调：

$('#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);
        );
    );
};

Answer 2

更仔细地查看我发布的原始示例以及@Blazemonger 的回答，以下内容似乎达到了预期的结果：

1. 将 random.php 加载到 #box1 中：

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

2. 单击时将#box1 移出屏幕

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

3. 将 random.php 加载到 #box2 并将其移动到屏幕上。使用$(this.next)意味着当 #box2 处于焦点时 random.php 加载到 #box1 中，反之亦然。

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