对当前页面进行动画处理并加载新页面

Question

So i have 5 portfolio items and what i'd like to happen when a user clicks on one is that the project details page animates and loads in over the page. Now i'v made a quick basis of how i thought this could work but not sure if this is the way to go. Also not sure how i should load in the different content for the different projects if i do it like this..

Now i just animate a hidden div over the whole page when one of the portfolio items is clicked. Here is a fiddle so you guys get a better idea:

http://jsfiddle.net/MF32t/1/

$(document).ready(function() {
$('.portfolio__project').click(function() { 
    $('.projectDetails').css({"display":"inline"});
    $('.projectDetails').animate({"width":"100%"}, 750);
    $('.projectDetails').delay(500).animate({"height":"100%"}, 750);
});

});

Is the the way to go? Or should i think in a different direction? Don't need ready to go and working code but just need a push in the right direction.

Thanks!

Answer 1

You can use ajax to load the content. A draft could look like this

function loadProject(projectID) {
  $.post(
    "loadProject.php",
    {
      projectID: projectID
    },
    function(content) {
      // Set the content
      $("#content").html(content); // and animations
    }
  );
}

You can also load the project details only in a main container, you don't need to hide the whole page. When loading the content you fade out the old one, set the new content and fade in the new one (for example). It's your choice here