javascript - Pjax loaded content is hidden -

i'm trying integrate jquery-pjax theme (next hexo.io), , here's code using 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 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() , (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 tutorial, , looked @ other websites used same kind of structure, loaded content stays hidden (or partially hidden) after clicking link (but can still select -hidden- content, that's weird part).

i didn't see weird errors on console, tried move around pjax div, looked @ computed css area (and doesn't have opacity-related attribute)... , i'm running out of ideas.

any appreciated. thanks!

solution:

the animations triggering scripts not in pjax div, when set opacity 0 made whole pjax process useless. moving them in div made work :)

the problem have css setting content opacity 0

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

use need change opacity 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 pointed out there still hidden content. because more elements have opacity 0. not going search out these occurrences. mentioned archive page missing content noticed this

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

again same above change line gave include targeting classes so:

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

you can see how add comma more selectors target multiple instances. given find rest of opacity 0 elements , add jquery statement.