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

Question

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

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

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

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

编辑:对不起，解释分心了，忘了问确切的问题:

我怎样才能让它在你点击一个内部链接时，导致这一系列事件:

内容框滑出->内容变化->折叠增长->内容框滑入新内容

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

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

工作/娱乐页面在顶部有一个垂直折叠， block 从中向下滑动。

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

我怎样才能让 AJAX 可以检测到当前加载的内容，从而知道如何使用react？

提前感谢您的所有帮助!

Answer 1

嗯，您已经为自己概述了您需要做的事情，所以我将提供一个未经测试的概述，以说明如何使类似的工作正常进行。

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

我个人喜欢函数对象。