How to make github style page transitions by pjax

问题

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

回答1:

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.com/blog/760-the-tree-slider

回答2:

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.

回答3:

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

来源：https://stackoverflow.com/questions/8013818/how-to-make-github-style-page-transitions-by-pjax