使用 ajax 和 css 转换加载另一个页面时保持当前页面可见

Question

我正在使用 ajax 加载下一页，它工作正常。 （带有aws ajaxify插件的wordpress）

pastebin of ajax js

我现在想要的只是保持当前页面可见，直到下一页加载并占据视口。

这里是演示站点 m 的链接 http://goo.gl/R8sGB5

所以当我点击任何链接时，我的 ajax 插件会执行以下操作

准备变量

contentSelector = '#' + aws_data['container_id'],
        $content = $(contentSelector),

然后它添加一个淡出过渡

$body.ajaxify();

    // Hook into State Changes
    $(window).bind('statechange',function(){
        // Prepare Variables
        var
        State       = History.getState(),
        url         = State.url,
        relativeUrl = url.replace(rootUrl,'');

        // Set Loading
        $body.addClass('loading');

        // Start Fade Out
        // Animating to opacity to 0 still keeps the element's height intact
        // Which prevents that annoying pop bang issue when loading in new content

        if ( '' != aws_data['transition'] ) {
        $content.animate({opacity:0.6},900);

所以在这个缓慢的淡出之后，插件使用 ajax 请求新页面

// Ajax Request the Traditional Page

页面加载良好。现在在这里我想让当前页面在背景中仍然可见，并且新页面带有 slideLeft 过渡。

为此我准备好了slideLeft css 类。

我准备申请$content.addClass("slideLeft");，但是当我这样做时，当前页面首先消失，然后在黑屏上进入下一页..

那么我怎样才能做到这一点，当前页面保持可见直到下一页滑到最左边的位置？

我想要的非常接近的原型是https://www.dropbox.com/guide/admin

谢谢

编辑1

根据@vinrav 的建议，我修改了代码，但是当下一页加载时，当前页面消失了

这是我修改后的代码的 pastebin

http://pastebin.com/gVFjayDK

line no 122 to 125( fadeout after ajax request )
line no 140 ( adding transition class) 

我猜我的顺序有问题，寻求帮助。

非常感谢

Answer 1

您需要更改点击的处理顺序。

1. 准备变量。
2. 让 ajax 请求页面。
3. 然后淡出当前页面。淡出时间需要足够大以满足通过 ajaxing 获取请求页面的时间。这取决于您的服务器速度、客户端互联网速度和其他因素。
4. 当您获得请求的页面时，开始向左滑动过渡，如果当前页面淡出时间足够大，您将不会出现黑屏。

我的建议等到通过ajax得到请求的页面后，才开始淡出当前页面。您的关闭原型（https://www.dropbox.com/guide/admin）就是这样做的。 Dropbox 站点等待来自 ajax 的响应（您可以在页面顶部看到一个栏，它告诉我们等待...... ajax 正在路上......）

编辑：

1. 准备变量。
2. 让 ajax 请求页面。
3. 获取请求的页面。
4. 开始淡出。
5. 开始向左滑动