how can i get the same function onClick and onpopstate with ajax

Question

I made an AJAX navigation with a fadeout-in effect on my menu click, and I used history.pushstate for get my URL links so now how can I make the same effect on my onpopstate function? (when the user click on the return button of the browser):

This is my code:

$(document).ready(function() {
  $("#menu a").click(function() { 
    var page = $(this).attr("href");
    $.ajax({
      url: "pages/" + page,
      cache: false,
      success: function(html) {
        afficher(html, page);
        history.pushState({ key: 'value'}, 'hash', page);
      }, 
      error:function(XMLHttpRequest, textStatus, errorThrown) {
        afficher("erreur lors du chagement de la page");
      }
    });
    return false;
  });

  $('#container').on('click', '.vs-transform a', function() {
    var page = $(this).attr("href");
    $.ajax({
      url: "pages/" + page,
      cache: false,
      success: function(html) {
        afficher(html, page);
        history.pushState({key : 'value'}, 'hash', page);
      },
      error: function(XMLHttpRequest, textStatus, errorThrown) {
        afficher("erreur lors du chagement de la page");
      }
    });
    return false;
  }); 

  window.onpopstate = function(event) {
    if (event.state === null) {
      // Here have to make the same fadeout-in effect but how to get my data variable? 
    }
  };
});


function afficher(data, page) {
  $("#container").delay( 100 ).fadeOut(400, function() {
    $("#container").empty();                
    $("#container").append(data);
    $("#container").fadeIn(500);
  });
}

Answer 1

I think you just have to extract your function and manipulate it or call it a bit differently because you don't have an actual DOM element with an href

function getYourData (someHref) { 
  var page = someHref || $(this).attr("href"); // override or default
  $.ajax({
    url: "pages/" + page,
    cache: false,
    success: function (html) {
      afficher(html, page);
      history.pushState({ key: 'value'}, 'hash', page);
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
      afficher("erreur lors du chagement de la page");
    }
  });
  return false;
}

$(document).ready(function() {
  $("#menu a").click(getYourData);
  $('#container').on('click', '.vs-transform a', getYourData);

  window.onpopstate = function(event) {
    if (event.state === null) {
      getYourData(document.referrer); // some href
    }
  };
});


function afficher(data, page) {
  $("#container").delay( 100 ).fadeOut(400, function() {
    $("#container").empty();                
    $("#container").append(data);
    $("#container").fadeIn(500);
  });
}