菜单过渡/动画答案

【问题标题】：Menu Transition/Animation菜单过渡/动画
【发布时间】：2013-01-23 05:30:43
【问题描述】：

好的，所以我有一个菜单的想法，但我真的不知道如何实现它或需要什么，我对网页设计非常陌生。所以基本上当菜单上的一个项目被突出显示时，我希望滑块在突出显示的项目下移动，就像这样

http://s7.postimage.org/qa3vfh797/purple.gif

所以当我在一个页面上时，我想要与该页面相关的菜单选项卡下的滑块。当我将鼠标悬停在菜单中的某个项目上时，滑块会从当前选项卡滑动到突出显示的选项卡。当用户取消突出显示它时，它会返回到与用户所在页面相关的选项卡。任何帮助将不胜感激

【问题讨论】：

您有几个选择。我建议您了解 JavaScript。特别是学习 jQuery 并查看您有的几个选择 jqueryui.com

标签： javascript html animation css-transitions

【解决方案1】：

我打算为您提供一个 jsfiddle 示例，但无需重新发明轮子。

jQuery 魔法线： Article & Demo

如果这不是你想要的方向，那么我建议使用jQuery UI，特别是标签部分：here。确保使用带有Themeroller 的jQueryUI，它允许用户自定义。

希望这对您有所帮助，如果您有任何问题，请告诉我！

【讨论】：

【解决方案2】：

我不会给你完整的代码，但我会用一些关键词为你指明正确的方向。您需要为将在菜单项下方滑动的栏创建一个。将每个菜单项封装在一个 div 中，并为每个菜单项实现一个 onMouseOver 事件。然后在 onMouseOver 事件中，你需要将 div 从当前位置移动到这个菜单 div 下，即将滑块 div 的 offsetLeft 更改为菜单 div 的 offsetLeft 值（如果你使用 jquery，它提供了方便的函数来获取）。现在更改 div 的位置将直接将其移动到那里。如果您想在“幻灯片”动画中完成它，那么您需要逐步移动它，比如说每次以 5 px 为增量。为此使用 setTimeOut 函数。创建一个函数以 5 px 的增量更改滑块 div 的 offsetLeft 值，并一次又一次地调用此函数，直到它通过 setTimeout 函数到达目的地。 setTimeout 基本上是一个计时器，它会在指定的时间后调用一个函数。

这应该足以让您在 google 上搜索 :)

【讨论】：

感谢您的帮助！我的 div 标签在滚动菜单项时移动了一定的量，我只需要将其设置为 menuItem div 的 x 位置，但 Dom 给了我所需的东西，但我真的很感激帮助！
是的，我看到了 Dom 的评论，我认为这正是您所需要的。如果您必须在不使用任何库的情况下进行构建，我只是想解释一下:)。