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/

编辑：更新的链接直接重置滑块添加到家庭和变更用滑块宽度

如果您有任何问题随时问。

注：

• 你可以将所有的CSS到jQuery插件使得它自控件包含
• 你可以分开的颜色系统的滑块，但在这种情况下，我不知道，如果这是值得的
• 现在我不设置在CSS简单的颜色，这意味着没有JavaScript的浏览器只会得到默认的彩色链接。有很多解决方案，但这取决于你想要做什么。我倾向于更喜欢widget的风格，所以我会向客户端提供一个html菜单，然后将其替换为带有所有其自己样式和所有风格的js widget的。这种方式你有优雅的退化，但代码仍然简单和两岸向前。