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动画，使它更小（尽管你可能想保持跨浏览器的比较）。代码仍然比它需要的复杂一点，虽然这更多是因为我现在没有太多时间。你可以在这里看到解决方案：

编辑：更新的网址，将重置滑块添加到主页并更改滑块宽度

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

注意：

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