滑动格屏幕外，追加与Ajax调用的内容，滑动屏幕上的div(slide div offscreen,

我有一个是包含通过jQuery的AJAX调用加载文本在页面上居中一个div。 当点击一个按钮，它刷新该内容DIV ：

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

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

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

1. 按下按钮
2. DIV从右向左移动关闭屏幕
3. DIV内容更新
4. DIV从右屏幕上的新内容向左移动。

此示例示出了完美的视觉效果。 我已经看过的代码和我能够用两个div，每个都包含独特的内容复制的效果，但我在努力加载Ajax调用到第二个div。

这是我迄今为止 - 这显然是不正确，因为在div之前的新内容加载开始移动（并且不回来！）

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

我怀疑负载（）是不正确的功能在这里，而且或许需要有第二个空的div内容加载到，但我有点难倒。 与HTML / CSS中的jsfiddle 可以在这里找到 。 非常感谢。

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

文章来源: slide div offscreen, append content with ajax call, slide div onscreen