使用 JQuery 的水平页面动画

Posted 2023-02-25

【中文标题】使用 JQuery 的水平页面动画

【英文标题】：Horizontal Page Animation with JQuery

【发布时间】：2012-11-02 01:33:48

【问题描述】：

我正在尝试制作一个带有水平页面动画的网站。目前，我正在使用在此站点上找到的插件。 http://manos.malihu.gr/horizontal-page-animation-to-id-with-jquery/

这是我的问题：

我决定添加更多页面，例如#c7 和 #c8。我还将容器的宽度调整为 13500px 以适应 8 个页面。现在，如果您单击内容 7 和内容 8，则滑动可以工作。但是，如果您从第 8 页单击第 1 - 7 页，它将捕捉到这些页面。我怎样才能有一个干净的页面过渡？例如如果从第 6 页点击第 4 页，则过渡是平滑的。

我已经浏览了 js 文件，并使用了 css，但我似乎无法解决我遇到的问题。希望能有一双新的眼睛来看看这个谢谢。

希望你能帮忙。

编辑： 添加了指向示例页面的链接。尝试单击第 8 页或第 9 页。在该页面中，单击第 1 -7 页。它有那种活泼的动画，而且过渡并不流畅。

http://dl.dropbox.com/u/57617407/Websites/horizontal-animate-page-to-id-jquery.html

非常感谢。

哈基莫

【问题讨论】：

无法确认这一点，但我想我读到某处的宽度限制为 10,000 像素

默认宽度为 10,000 像素。如果我添加一个新页面 #c7 并将宽度更改为 13,500，过渡仍然可以顺利进行。但是，如果我添加#c8 并将宽度更改为 17,000 或更高，则过渡变得活泼。不知道我应该玩css还是js :(

【参考方案1】：

我对此进行了调查。 简短地说：使用您那里拥有的更新版本的库。

“有点”更长的解释：

首先 - 这是什么？“活泼”的动画之所以会发生，是因为点击时（动画开始时），它会立即在容器上“向左”下降到 0（无论您选择什么）。然后它会平滑地将“左”属性设置为您选择的条目（从零开始）。而且因为它必须滚动浏览所有条目（就像选择了第一个条目一样），这看起来很尴尬。人眼无法注意到这种快速变化。调试器是我们的朋友。

下一步 - 什么时候发生？通过反复试验，我发现了一个条件：如果在动画开始时“左”甚至小于 -10000 像素（或者可能是 -11000，不确定）。

最后 - 为什么会发生？ 答案很简单。这是一个错误。这已经被修复了。 因此，请尝试将支持此页面的所有脚本更新为最新版本。 That's the change I found about that (clickable).

我是如何发现的：

如果您选择了一个已经被选中的条目怎么办？大多数行为正常 - 保持空闲状态。但最后一个会降到第一个，然后自己制作动画。 Chrome 开发者工具可以创造奇迹（Chrome 中的 F12）。类似的东西：Opera 中的 Dragonfly（基于 Presto，即 12.XX 或更早版本，在 v15 中与 Chrome 相同）和 Firefox 中的 Firebug。 我偶然发现了this entry on jQuery bug tracker (clickable as well)，它可能包含立即修复的信息，无需更新。如果您不介意挖掘缩小的 JS，这很难。 选择具有第一个活动的最后一个条目会产生与您所说的“快速动画”完全相同的效果。

【讨论】：

非常感谢。说实话，我实际上停止在该网站上工作。我想现在我会再次打开它。

【参考方案2】：

它似乎在演示页面http://manos.malihu.gr/tuts/horizontal-animate-page-to-id-jquery.html 上工作得很好（我用 firefox 10 和 chromium 22 进行了测试），所以我怀疑问题是与您页面中的其他脚本有冲突..

我的建议是，尽量禁用其他可能干扰的东西，然后（如果滑动效果正常）重新启用它们，以找出导致故障的原因。 .

【讨论】：

感谢您的回复。实际上，出于测试目的，我只包含插件中的 js 脚本。演示页面工作正常，但只有第 1 - 6 页。我添加了第 7,8 和 9 页。第 7 页适用于我，但第 8 页和第 9 页有那个奇怪的过渡的东西。我将编辑我的帖子以包含一个示例页面来向您展示我的意思。