Jquery 屏幕外滑动div、使用ajax调用追加内容、屏幕上滑动div

我有一个div，它集中在包含通过jqueryajax调用加载的文本的页面上。单击按钮时，它将刷新该

DIV

的内容：

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

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

我现在想做的是按以下顺序在按下按钮时设置div的动画：

按钮按下了

div从右向左移出屏幕

div内容已更新

带有新内容的div在屏幕上从右向左移动

完美地展示了视觉效果。我已经看过代码，能够用两个div复制效果，每个div都包含唯一的内容，但是我很难将ajax调用加载到第二个div中

到目前为止，这就是我所知道的——这显然是错误的，因为新内容在div开始移动之前加载（并且不会回来！）：

我怀疑load（）在这里不是正确的函数，可能需要第二个空div来加载内容，但我有点困惑。带有html/css的JSFIDLE。非常感谢。

您需要使用：

您需要使用：

---

仔细查看我发布的内容和@Blazemonger的答案，以下内容似乎达到了预期效果：

将random.php加载到#box1：

单击时将#框1移出屏幕

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

将random.php加载到#box2并在屏幕上移动它。使用

$（this.next）

意味着当#box2处于焦点时，random.php将加载到#box1中，反之亦然

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

---

仔细查看我发布的内容和@Blazemonger的答案，以下内容似乎达到了预期效果：

将random.php加载到#box1：

单击时将#框1移出屏幕

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

将random.php加载到#box2并在屏幕上移动它。使用

$（this.next）

意味着当#box2处于焦点时，random.php将加载到#box1中，反之亦然

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

---

谢谢，这似乎解决了在

DIV

离开屏幕之前加载ajax查询的问题。然而，我认为我引入新内容的代码是有缺陷的，因为它从左边为同一个div设置了动画。我认为可能需要一个新的div来将内容追加到中，这与可视化示例的思路相同。（）谢谢，这似乎解决了

DIV

离开屏幕之前的ajax查询加载问题。然而，我认为我引入新内容的代码是有缺陷的，因为它从左边为同一个div设置了动画。我认为可能需要一个新的div来将内容追加到中，这与可视化示例的思路相同。()

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