Question

我正在尝试将jquery-pjax集成到一个主题（Hexo.io的NexT）中，这是我正在使用的代码：

(function() {
        (function($) {
                return $(document).pjax('a', '#pjax', {
                        fragment: '#pjax',
                       timeout: 10000
                }).on('pjax:send', function() {
                        topbar.show();
                        $('body').velocity({paddingRight: 0});
                }).on('pjax:complete', function() {
                        topbar.hide();
                });
        })(jQuery);

}).call(this);

相关的HTML布局：

<div id="header" class="header">
  <div class="header-inner">
    {% include '_partials/header.swig' %}
  </div>
</div>

<div id="pjax">
<div id="main" class="main">
  <div class="main-inner">
    <div id="content" class="content">
      {% if is_home() or is_post() %}
        {% set postsClass = "posts-expand" %}
      {% else %}
        {% set postsClass = "posts-collapse" %}
      {% endif %}

      <div id="posts" class="{{ postsClass }}">
        {% block content %}{% endblock %}
      </div>

      {% if not is_post() and (page.prev || page.next) %}
        <div class="pagination">
          {{ paginator({prev_text: '&laquo;', next_text: '&raquo;'}) }}
        </div>
      {% endif %}
    </div>

    {% include '_partials/sidebar.swig' %}

  </div>
</div>
</div> <!-- end pjax -->

<div id="footer" class="footer">
  <div class="footer-inner">
    {% include '_partials/footer.swig' %}
  </div>
</div>

<div class="back-to-top"></div>

我按照教程，查看了使用相同类型结构的其他网站，但是点击任何链接后加载的内容保持隐藏（或部分隐藏）（但你仍然可以选择这个 - 隐藏内容，那就是奇怪的部分）。

我没有在控制台上看到任何奇怪的错误，试图移动pjax div，查看该区域的计算CSS（并且它没有任何与opacity相关的属性）......而且我我的想法已经不多了。

感谢任何帮助。谢谢！

解决方案：

触发脚本的动画不在pjax div中，因此当它们将不透明度设置为0时，它使整个pjax进程无效。在这个div中移动它们使一切正常：）

Answer 1

问题是你有一些css将内容不透明度设置为0

.use-motion .post {
    opacity: 0;
 }

使用需要更改它，使不透明度为1

.use-motion .post {
    opacity: 1;
}

所以也许试试

(function() {
    (function($) {
            return $(document).pjax('a', '#pjax', {
                    fragment: '#pjax',
                   timeout: 10000
            }).on('pjax:send', function() {
                    topbar.show();
                    $('body').velocity({paddingRight: 0});
            }).on('pjax:complete', function() {
                    topbar.hide();
                    $(".use-motion .post").css("opacity","1");

            });
    })(jQuery);

}).call(this);

正如您所指出的那样，仍有隐藏的内容。这是因为更多元素具有不透明度0.我不会搜索所有这些事件。正如您所提到的，存档页面缺少一些我注意到的内容

.use-motion .motion-element {
     opacity:0;
}

再次与上面相同，所以改变我给你的那一行包括这样的类的目标：

$(".use-motion .post, .use-motion .motion-element").css("opacity","1");

您可以看到如何添加逗号，然后选择更多选择器来定位多个实例。现在给定这个找到其余的不透明度0元素并将其添加到该jquery语句。

Pjax加载的内容是隐藏的

1 个答案: