Question

我有一个div，它以包含通过jquery ajax调用加载的文本的页面为中心。单击按钮时，它会刷新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在屏幕上从右向左移动。

This example完美地说明了视觉效果。我查看了代码，并且能够使用两个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);
};

我怀疑load（）在这里不是正确的功能，并且可能需要第二个空div来加载内容，但我有点难过。一个jsfiddle与html / css can be found here。非常感谢。

Answer 1

您需要使用"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);
        );
    );
};

Answer 2

仔细观察我发布的original example，以及@ Blazemonger的回答，以下内容似乎达到了预期效果：

将random.php加载到＃box1：

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

单击时将＃box1移出屏幕

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

2 个答案: