jQuery导航菜单问题

Question

3

我有一个演示，你可以在这里查看所有涉及的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元素中的链接返回到白色，当没有链接悬停时(当滑块返回到主页链接时)。

然而，在查看这里的演示时，您会发现这会在导航栏中创建一些可怕的故障(摆动鼠标以查看我所说的，我最终造成了某些问题，其中白色悬停动画根本不起作用)。

另外，顺便说一下，为什么我的回调函数在动画悬停矩形之前被调用？我对jquery很陌生，我认为第四个参数是在动画完成后要调用的函数。

谢谢！

- nmford

顺便提一下，StackOverflow支持Markdown格式，无需使用丑陋的HTML标签和字符代码即可格式化文本。我已经按照这种方式重新格式化了您的问题。 - pimvdb

谢谢！我会记住下次的。 - nmford

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Carl Sverre · Accepted Answer

你的代码过于复杂。我把你想做的事情重构成一个非常简单的jQuery插件。如果你愿意，我建议你去研究一下css3动画，以使它更小（尽管你可能需要保持跨浏览器兼容性）。虽然代码仍然比它需要的复杂一些，但这更多是由于我现在时间不够。你可以在这里看到解决方案：

编辑：更新网址以将滑块重置为主页并更改滑块宽度

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

注：

您可以将所有CSS移动到jQuery插件中，使其成为自包含小部件
您可以将滑块与颜色系统分开，尽管在这种情况下我不确定是否值得
目前，我没有在CSS中设置颜色，这样没有JavaScript的浏览器将只获得默认颜色的链接。有许多解决方案，但这取决于您想要做什么。我倾向于小部件风格的东西，因此我会向客户端提供HTML菜单，然后用所有自己的样式等js小部件替换它。这样，您就可以优雅地降级，但代码仍然简单和直观。