jQuery 概念问题 - 滑入新内容

Posted 2023-05-08

【中文标题】jQuery 概念问题 - 滑入新内容

【英文标题】：jQuery conceptual question - sliding in new content

【发布时间】：2011-09-05 04:33:43

【问题描述】：

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

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

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

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

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

任何帮助都会有所帮助。

谢谢

【问题讨论】：

这似乎正是您想要的，不幸的是它不是免费代码，但它可能物有所值：codecanyon.net/item/jquery-ajax-slide-content/…

【参考方案1】：

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

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

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

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

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

【讨论】：

我的意思是从页面外滑入。不是手风琴。此外，在任何给定时间，我的页面上只有一个内容区域，所以我的页面上只有一个内容 div。我想我可以有另一个隐藏的内容区域，但是第一次请求页面时，那里会出现什么？如果没有标记，它会完全是空的吗？正如我所说，大多数示例都已经在页面上包含所有数据，但在我的情况下，这是通过 AJAX 加载的新数据。

您可以根据需要拥有任意数量的 div。在这种情况下，如果你想让内容从页面滑入，它必须进入 some 元素，很明显的就是一个 div。本教程也可能会给你一些帮助：net.tutsplus.com/tutorials/javascript-ajax/inettuts

谢谢，我去看看。

【参考方案2】：

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

【讨论】：

感谢您的回复。成功的作用是什么？

ajax调用成功函数