我有一个 div, 以包含通过 jquery ajax 调用装入的文本的页面为中心。 当单击按钮时, 它会刷新 < code> DIV 的内容 :

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

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

现在我想做的是按下按键时按下以下顺序来动画div:

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.

"https://stackoverflow.com/ questions/4741880/sliide-a-div-offscreen-using-jquery" >这个示例 完美地说明了视觉效果。我已经查看了代码,并且能够用两个二维字复制效果,每个字都包含独特的内容,但正努力将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);
};

我怀疑负载() 不是一个正确的函数, 也许需要第二个空迪夫将内容装入, 但我有点碎裂 。 此处可以找到 html/ css < a href=" http://jsfidle. net/ BGPed/" rel=" nofollow noreferrer" 。 非常感谢 。