jQuery 概念问题 - 滑入新内容

Question

我是 jquery 和 AJAX 的新手。我正在努力降低我的概念。我会尽量简化问题。

我有一个页面，其中包含从数据库中提取的一些#data，以及一个下一步按钮。当按下下一个按钮时，我想用数据库中的新随机数据刷新#data，依此类推。我希望这个新的#data 从右侧滑入。我不想刷新整个页面，我希望#data 使用 AJAX 刷新。

除了滑动部分之外，我完成了大部分工作。我不确定从概念上如何处理这个问题。我见过的许多示例在页面上都有静态数据，这些数据使用 CSS 从视图中隐藏，然后 jquery 使用 .animate 将面板滑动到视图中。

在我的情况下，数据不在页面上，我正在使用加载功能加载它。

我最大的问题是在哪里加载新数据？我无法将它加载到现有的#data div 中，因为那样就没有滑块了。我是否将一个空的 div 作为加载的占位符，然后在其中加载新数据并滑动它？

任何帮助都会有所帮助。

谢谢

Answer 1

取决于您所说的“滑入”是什么意思，但是像手风琴滑块这样的东西基本上可以通过将数据放入 div 中然后进行动画处理来工作。如果你真的想让它从页面的另一个区域进来，你可以把它放到一个 div 中，然后使用动画函数来移动它。

等一下，示例代码中有一些这样的例子，我会找到一个链接。

好的，the docs for .animate() 有几个例子，所以这是一个开始的地方。基本上，您有一个 div 并使用 .animate() 方法定期更新 CSS —— 当然这包括页面上的位置等内容。

这是一个不错的photo slider，在概念上很相似。同样，您真正要做的只是更改 CSS，从而导致浏览器在不同的位置呈现元素。

还有一堆有用的教程和例子here、here、here和here。

Answer 2

如果您想坚持您在问题中提到的示例，那么您可以做的是在您的成功函数中将数据插入到您的 html 中，但是您需要对其进行格式化。这可以在 div 或 table 或其他任何地方。让这个 html "display: none" 开始。这样它就不会立即显示给用户，但它仍然存在于 DOM 中。此时，您可以将 html 视为您的示例在调用 animate 之前处于相同的“状态”（此时将其视为静态内容）。所以剩下要做的就是调用 animate。