0

我正在尝试做一个带有水平页面动画的网站。目前，我正在使用在此站点上找到的插件。http://manos.malihu.gr/horizo​​ntal-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/horizo​​ntal-animate-page-to-id-jquery.html

非常感谢。

  • 哈基莫
4

2 回答 2

1

我对此进行了调查。很快：使用您那里拥有的更新版本的库。

“有点”更长的解释：

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

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

最后 - 为什么会发生？答案很简单。这是一个错误。这已经被修复了。因此，请尝试将支持此页面的所有脚本更新为最新版本。这就是我发现的变化（可点击）。

我是如何发现的：

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

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

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

于 2012-11-02T01:45:09.100 回答