Question

是的，所以我决定将自己作为学习曲线的一种形式。我之前从未使用过ajax，但我觉得这是我必须学习的东西，所以有更好的机会去做新的投资组合网站。

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

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

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

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

如何制作它，以便当您点击内部链接时，它会导致这一系列事件：

内容框滑出 - ＆gt;内容更改 - ＆gt;折叠增长 - ＆gt;内容框插入新内容

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

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

“工作/娱乐”页面顶部有一个垂直折叠，块向下滑动。

接触是一个简单的全宽，所以在两侧折叠填充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调用的确切语法，但您可以从相关文档中找出所有可能的选项

除了编辑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();

我个人喜欢有功能对象。

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

1 个答案: