Как сделать двигающийся border-bottom при наведении на пункты меню?

Question

[smk_dn]

Помогите сделать двигающийся border-bottom для меню на сайте. Чтоб при наведении на пункты он не просто появлялся, а плавно переезжал.

Answer 1

[Виктор]

Мой вариант.

Comments

[Sashqa]

Хорошо бы еще .stop() добавить, а то если подергать мышкой.... )

[Виктор]

Sashqa: Да, недавно тоже обнаружил такую проблему)

[Виктор]

Обновил

Answer 2

[Kater-auf-Dach]

Можете посмотреть еще библиотечку Hover - в разделе Border Transitions есть нечто похожее, но надо допиливать

Answer 3

[rapkin]

для анимирования используется свойство transition. для сложных анимаций www.w3schools.com/css/css3_animations.asp
если я правильно понял ваше требование, то код реализующий описанный эффект можно посмотреть здесь jsfiddle.net/psj9a3y7

Comments

[smk_dn]

Не совсем. Мне нужно чтоб бордер при наведении не появлялся заново, а просто ездил. (вправо-влево)

[rapkin]

smk_dn: тут без js не обойтись

[smk_dn]

rapkin dev: я понял, спасибо.

[SimonVue]

спасибо! как раз то, что искал :)

Answer 4

[Ilya Korablev]

Вот
Вот еще, если хотите его изначально сделать невидимым.

Comments

[smk_dn]

Не совсем нужен такой эфект. А такой, чтобы при наведении он появлялся, а дальше ездил вправо-влево от 1го пункта к другому.