Help a ajax noob with ajax page transitions

JavaScript
1

Hi,

I just started reading about ajax and managing to load pages using this:

$(function() {

  var $pageContent = $('#main');
  
  var loadContent = function(url) {
    
    $pageContent.fadeOut(function() {
      $pageContent.load(url, function() {
        $pageContent.fadeIn();
      });
    });
    
  };
  
  $('#main-menu a').on('click', function(event) {
    
    event.preventDefault();
    loadContent($(this).attr('href'));
    
  });
  
});

But what I want to do in the end is transition the old page out and the new page in using CSS transitions by adding/removing classes, with a “loading” state in between. How would you do this?

2

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.