滑动屏幕外的div，追加与Ajax调用的内容，滑动屏幕上的div [英] slide div offscreen, append content with ajax call, slide div onscreen

问题描述

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

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

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

What I would now like to do is animate the div when the button is pressed, in the following order:

1. 按钮pressed


2. DIV从向右移动关闭屏幕左


3. DIV内容更新


4. DIV从右屏幕上新的内容移动到左。

这个例子说明完美的视觉效果。我已经看了看code和我能够复制有两个div的，每个都包含独特的内容，效果，但我在努力Ajax调用加载到第二个div。

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.

这是我迄今为止 - 这显然是不正确，因为新的内容加载的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);
};

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

推荐答案

您需要使用完成 回调：

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

这篇关于滑动屏幕外的div，追加与Ajax调用的内容，滑动屏幕上的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！