在当前页面上动画和加载新页面

Animate and load new page over current page

本文关键字：加载 新页面 动画 当前页      更新时间：2023-09-26

所以我有 5 个投资组合项，当用户单击其中一个时，我希望发生的事情是项目详细信息页面在页面上动画和加载。现在，我已经快速了解了我认为这可以如何工作，但不确定这是否是要走的路。也不确定如果我这样做，我应该如何为不同的项目加载不同的内容。

现在，当单击其中一个投资组合项时，我只是在整个页面上设置一个隐藏的div动画。这是一个小提琴，所以你们有一个更好的主意：

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

}(;

这是要走的路吗？还是我应该换个方向思考？不需要准备好和工作代码，只需要朝着正确的方向推动。

谢谢！

您可以使用 ajax 加载内容。草稿可能如下所示

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

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

相关文章：