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的。這種方式你有優雅的退化，但代碼仍然簡單和兩岸向前。