jQuery导航菜单问题

Question

我有一个演示 up here，因此您可以查看所有涉及的 html 和 javascript。

问题：

我遇到的问题是，目前，当您将鼠标悬停在链接上（除了主页）然后将鼠标移动到屏幕上的任何其他位置（除了主页链接）时，主页链接不会恢复为白色文本颜色。

我尝试通过更改以下代码来解决问题（查看从页面链接到的“example.js”文件以查看完整代码）：

if (status == "off")
{
$(this).stop().animate({ color: linkcol },500);
}

我加了一行

if (status == "off")
{
$(this).stop().animate({ color: linkcol },500);
$(".current_page_item_two a").stop().animate({ color: whitecol },500);
}

此行旨在将 current_page_item_two 元素内的链接设置回白色，当没有链接悬停时（当滑块返回主链接时）。

但是，查看演示 here，您可以看到这会在导航中产生一些可怕的故障（在链接上摆动鼠标以了解我的意思，我最终导致了一些问题，即白色翻转动画根本不工作）

另外，作为旁注，为什么在动画完成之前调用悬停矩形动画时的回调函数？我是 jquery 新手，我的印象是第四个参数是动画完成时要调用的函数。

谢谢！

Answer 1

您的代码过于复杂。我将您想要做的事情重构为一个非常简单的 jQuery 插件。如果您愿意，我鼓励您研究 css3 动画以使其更小（尽管您可能希望保持跨浏览器兼容性）。代码仍然比它需要的复杂一点，尽管这更多是因为我目前没有太多时间。您可以在此处查看解决方案：

http://jsfiddle.net/hGm7M/3/

编辑：更新 url 以将重置滑块添加到主页并更改滑块宽度

如果您有任何问题，请随时提出。

注意事项：

• 您可以将所有 css 移动到 jQuery 插件中，使其成为一个独立的小部件
• 您可以将滑块与颜色系统分开，但在这种情况下我不确定是否值得
• 现在，为了简单起见，我没有在 css 中设置颜色，这意味着没有 javascript 的浏览器只会获得默认的彩色链接。有很多解决方案，但这取决于你想做什么。我倾向于喜欢事物的小部件样式，因此我会为客户端提供一个 html 菜单，然后将其 替换 为具有所有自己样式等的 js 小部件。这样您就可以优雅地降级，但代码仍然简单且严格。