0

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

ajax js的pastebin

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

这是在http://goo.gl/R8sGB5上工作的演示站点 m 的链接

所以当我点击任何链接时，我的 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)

我想我有正确顺序的问题，寻求帮助。

非常感谢

4

1 回答 1

0

您需要更改单击的过程顺序。

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

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

编辑：

  1. 准备变量。
  2. 让ajax请求页面。
  3. 获取请求的页面。
  4. 开始淡出。
  5. 开始向左滑动
于 2014-12-07T08:45:27.267 回答