javascript - How to make github style page transitions by pjax - Stack Overflow

admin管理员组

文章数量:1356429

Once a time, I read an article said that github page transition is made by pjax, I checked jquery-pjax project. I think I have close to the answer, it must be something related with event pjax:start and pjax:end, but I still can't get it works, so I try to get some help here.

$('a.pjax').pjax('#main');
$('#main').bind('pjax:start', function(){$('#main').slideUp()})
  .bind('pjax:end'), function(){$('#main').slideDown()});

But it has no effects

Once a time, I read an article said that github page transition is made by pjax, I checked jquery-pjax project. I think I have close to the answer, it must be something related with event pjax:start and pjax:end, but I still can't get it works, so I try to get some help here.

$('a.pjax').pjax('#main');
$('#main').bind('pjax:start', function(){$('#main').slideUp()})
  .bind('pjax:end'), function(){$('#main').slideDown()});

But it has no effects

• javascript
• jquery
• pjax

Share Improve this question Follow asked Nov 4, 2011 at 18:03 guilin 桂林guilin 桂林 17.4k3030 gold badges9696 silver badges148148 bronze badges 3

• Are you talking about how when you dig through code the next / previous pages slide in and out? That's done with HTML5 History API and basic behavioral JS. – Calvin Froedge Commented Nov 4, 2011 at 18:05
• @CalvinFroedge yes, I am talking about code view page, and you mean that nothing about pjax? – guilin 桂林 Commented Nov 4, 2011 at 18:14
• 2 Yep, the core of what makes that work is the History API: html5demos./history You'd do get requests after you swap to a new url. The effects part can be done with standard jQuery animate. – Calvin Froedge Commented Nov 4, 2011 at 18:33

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Github use HTML5 features for the page transitions. That includes the new JS History API and CSS3 transitions. No jQuery involved except for standard event listening, selectors. The blog post is here with all the relevant links https://github./blog/760-the-tree-slider

I don't know if this is relevant at all. But I've been using Pjax myself and the code above has a syntax error, should be:

$('a.pjax').pjax('#main');
$('#main').bind('pjax:start', function(){$('#main').slideUp()})
.bind('pjax:end', function(){$('#main').slideDown()});

Edit: Yes, sorry for not pointing that out. Exactly as @Udo Held said: You need to remove the bracket after 'pjax:end' or else it will not follow through and execute the $('#main').slideDown() function.

Pjax : Demo , Source[Github]
It is the one that github use.. reference

本文标签： javascriptHow to make github style page transitions by pjaxStack Overflow