HTML5 History - Fade out/in content on Back button click

Question

I've been trying to work with the history API for over a week now, but as a relatively inexperienced front-end developer, some of the explanation is beyond me. This article made the most sense to me but I wasn't able to get it working, especially when the header image stays visible but shrinks.

I'd like to reverse the faded content from the previous click when the Back button is pressed. Here's the current version of what I'm working with: openCurrents

JSFiddle

JS

$('#intro-button-1').click(function(){
  $('#intro-1').fadeOut(777, function(){
    $('#intro-2').fadeIn(777);
  });
});

$('#intro-button-2').click(function(){
  $('#home-logo').animate({width: "400px", height: "100px"}, 1200);
  $('#intro-2').fadeOut(777, function(){
    $('#intro-3').fadeIn(777);
  });
});

$('#intro-button-3').click(function(){
  $('#intro-3').fadeOut(777, function(){
    $('#intro-4').fadeIn(777);
  });
});

$('#intro-button-4').click(function(){
  $('#intro-4').fadeOut(777, function(){
    $('#intro-5').fadeIn(777);
  });
});