Pjax加载的内容被隐藏

I'm trying to integrate jquery-pjax into a theme (NexT for Hexo.io), and here's the code I am using for it:

(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);

And the related HTML layout:

<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>

I followed the tutorial, and looked at other websites that used the same kind of structure, however the loaded content stays hidden (or partially hidden) after clicking any link (but you can still select this -hidden- content, that's the weird part).

I didn't see any weird errors on the console, tried to move around the pjax div, looked at the computed CSS for this area (and it doesn't have any opacity-related attribute)... And I'm running out of ideas.

Any help is appreciated. Thanks!

Solution:

The animations triggering scripts were not in the pjax div, so when they set the opacity to 0 it made the whole pjax process useless. Moving them in this div made everything work :)

The problem is you have some css setting the content opacity to 0

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

use need to change it so the opacity is 1

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

so maybe try

(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);

So as you pointed out there is still hidden content. This is because more elements have opacity 0. I am not going to search out all these occurrences. As you mentioned the archive page is missing some content I noticed this

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

again the same as above so change that line I gave you to include targeting for those classes like so:

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

You can see how you just add a comma then more selectors to target multiple instances. Now given this find the rest of the opacity 0 elements and add it to that jquery statement.