Проблема с навигационным меню jQuery

Question

У меня есть демо здесь , так что вы можете посмотреть все html и javascript.

Проблема:

Проблема, с которой я столкнулся, заключается в том, что в тот момент, когда вы наводите курсор мыши на ссылку (кроме домашней), а затем перемещаете мышь куда-либо ещена экране (кроме домашней ссылки) домашняя ссылка не возвращается к белому цвету текста.

Я попытался решить проблему, изменив следующий фрагмент кода (для просмотра полного кода обратитесь к файлу «example.js» со ссылкой на страницу):

if (status == "off")
{
$(this).stop().animate({ color: linkcol },500);
}

Iдобавлена ​​дополнительная строка

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, чтобы сделать ее еще меньше (хотя вы, возможно, захотите поддерживать кросс-браузерную совместимость). Код все еще немного сложнее, чем нужно, хотя это связано с тем, что в данный момент у меня не так много времени. Вы можете увидеть решение здесь:

http://jsfiddle.net/hGm7M/3/

Редактировать: обновлен URL для добавления ползунка сброса к дому и изменения ширины ползунка

Если у вас есть какие-либо вопросы, не стесняйтесь спрашивать.

Примечания:

• Вы можете переместить все CSS в плагин jQuery, сделав его автономным виджетом
• Вы можете отделить ползунок от цветовой системы, хотя в этом случае я не уверен, стоит ли оно того
• Прямо сейчас я не устанавливаю цвета в css для простоты, что означает, что браузеры без javascript будут просто получать цветные ссылки по умолчанию. Есть несколько решений для этого, но это зависит от того, что вы хотите сделать. Я предпочитаю предпочитать стиль виджетов, поэтому я предоставляю html-меню клиенту, а затем замену на виджет js со всеми его собственными стилями и т. Д. Таким образом, у вас есть постепенное ухудшение, но код все еще прост и прямолинеен.