javascript - 在当前页面上动画并加载新页面

Question

所以我有 5 个投资组合元素，当用户点击其中一个元素时，我希望发生的是元素详细信息页面动画并加载到页面上。现在我已经快速了解了我认为这是如何工作的，但不确定这是否是可行的方法。如果我这样做的话，我也不确定我应该如何为不同的元素加载不同的内容..

现在，当其中一个投资组合元素被点击时，我只是在整个页面上设置一个隐藏的 div 动画。这是一个 fiddle ，让你们得到一个更好的主意:

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);
});

});

路在何方？还是我应该换个方向思考？不需要准备好运行代码，只需要朝着正确的方向插入。

谢谢!

Answer 1

您可以使用ajax 加载内容。草稿可能看起来像这样

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

您也可以仅在主容器中加载元素详细信息，而无需隐藏整个页面。加载内容时，您会淡出旧内容，设置新内容并淡入新内容(例如)。这里是你的选择