Question

所以我有5个项目组合项目以及当用户点击其中时我希望发生的是项目详细信息页面在页面上动画和加载。现在我快速了解一下我认为这可行的方法，但不确定这是否可行。如果我这样做的话，我也不确定如何加载不同项目的不同内容..

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

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

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

在当前页面上设置动画并加载新页面

1 个答案: