使用 ajax 和 CSS3 动画动态加载 wordpress 内容

Question

好的，所以我决定为自己设定一个挑战，作为一种学习曲线。我以前从未使用过 ajax，但我觉得这是我必须学习的东西，所以有什么比在一个新的投资组合网站上学习它更好的机会了。

网站的主要概念涉及网站内容在 960 边缘的折叠后面滑动，因此您单击一个链接，当前内容全部滑出到折叠中，它部分隐藏在折叠下方然后将调整大小以匹配新的内容块，并且新的内容从折叠下方滑入。到目前为止，我只是使用 Wordpress 循环和一些基本的 jquery 以一种简单的方式完成了新闻。 （仍然无法在新内容进入之前让折叠正确调整其高度）

我有这个（http://www.deluxeblogtips.com/2010/05/how-to-ajaxify-wordpress-theme.html）作为开始的基础，但它似乎并没有完全实现我的预期目标。

保存设置一些愚蠢的 jsfiddle，这是该站点的现状http://paradoxdevelopment.org/

编辑：抱歉，解释分心了，忘了问确切的问题：

我怎样才能让当你点击一个内部链接时，它会导致这个事件链：

内容框滑出-> 内容更改-> 折叠增长-> 内容框滑入新内容

编辑 2：我意识到我并没有真正让自己清楚。我已经设法让我的头脑围绕 ajax 加载内容，问题是内容以不同的方式加载到不同的页面。例如：

主页有 3 个从顶部垂直折叠向下滑动的最近站点、一条从左侧滑入的新闻帖子，以及从右侧滑入的新闻帖子列表。

Work/Play 页面在顶部有一个垂直折叠，块从该折叠处向下滑动。

Contact 是一个简单的全宽，所以两边折叠填充 960。现在关于页面也是如此，尽管将来可能会有一个侧边栏。

我怎样才能让 AJAX 能够检测到当前加载的内容以便知道如何做出反应？

感谢您提前提供的所有帮助！

Answer 1

好吧，您已经为自己概述了您需要做的事情，因此我将提供一个 untested 大纲，说明如何让类似的事情发挥作用。

 function animateInDone () {
      // do something here
 }

 function foldReady () {
      // fold has been scaled for this content let's show it on screen
      $('#contentBox').animate(
           {'left':'100px'},
           400,
           'swing',
           complete: animateInDone
      );
 }

 function contentLoadDone (responseText, textStatus, XMLHTTPStatus) {
      // new content loaded and displayed on div since we used .load()
      if (textStatus == 'success') {
           // change the fold size
           $('#fold').animate(
                {height:'350px'}, // or the new height of the contentBox or something else
                // this can also be {height:'+50px'}
                400, 
                'swing', 
                foldReady
           );
      } else {
           // handle errors
      }
 }

 function animateOutDone () {
      // load the new content by using .load or .ajax
      $('#contentBox').load(
           'newcontent.html',
           complete:contentLoadDone
      );
 }

 function contentChange () {
      // animate the content box out
      $('#contentBox').animate(
           {'left':window.innerWidth},
           400,
           'swing',
           complete: animateOutDone
      );
 }

我不确定.animate 调用的确切语法，但您可以从相关文档中找到所有可能的选项

• http://api.jquery.com/animate/
• http://api.jquery.com/load/
• http://api.jquery.com/ajax/

编辑 2 的补充： 您需要将 UI 的状态存储在某个位置。这可以像拥有一个仅存储当前页面名称的变量一样简单，或者您可以拥有一个类层次结构，其中每个页面都有自己的类，具有不同的 UI 输入/输出动画。

var pageHome = function () {
    this.animIn = function () {
       // animate home page in
    }

    this.animOut = function (newpage) {
       // animate home page out and set newpage.animIn as the callback for when the animation in done
    }
}

var pageNow = pageHome;
pageNow.animIn();

我个人喜欢函数对象。