jQuery導航菜單問題

Question

我在這里有一個演示，所以你可以查看所涉及的所有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的新手，我的印象是第四個參數是動畫完成時要調用的函數。

謝謝！

Answer 1

你的代碼是不必要的復雜。 我重構了你想做的一個非常簡單的jQuery插件。 如果你想我鼓勵你研究css3動畫，使它更小（盡管你可能想保持跨瀏覽器的比較）。 代碼仍然比它需要的復雜一點，雖然這更多是因為我現在沒有太多時間。 你可以在這里看到解決方案：

編輯：更新的URL以將重置滑塊添加到主頁並更改滑塊寬度

如果你有任何問題隨時問。

筆記：

您可以將所有css移動到jQuery插件中，使其成為一個自包含的小部件
您可以將滑塊與顏色系統分開，但在這種情況下我不確定它是否值得
現在我沒有在css中設置顏色以簡化，這意味着沒有javascript的瀏覽器只會獲得默認的彩色鏈接。 有很多解決方案，但這取決於你想做什么。 我傾向於喜歡小部件風格的東西，所以我會向客戶端提供一個html菜單，然后用一個帶有所有自己樣式的js小部件替換它。 這樣你就可以優雅地降級，但代碼仍然簡單而且前瞻性。