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

• 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

3 Answers 3

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