Застрял с jQuery animation, поможете?

Question

[Anton Filippov]

Добрый вечер!

На этот раз я застрял с анимацией рамочки.
Давайте сразу к делу: jsfiddle.net/ke6onghy
Мне нужно, чтобы при наведении на ссылку - на нее "перебегал" прямоугольник, а если мышку отвести обратно, чтобы он возвращался на первую ссылку. Ну и он должен менять свою ширину в зависимости от длины ссылки.

Проблема в том, что у меня когда прямоугольник едет на ссылку, попадает под указатель мыши и отъезжает обратно по событию mouseleave и его начинает колбасить туда сюда)

Что делать?
Понимаю, что у меня там сейчас написан ужасный говнокод :)

Answer 1

[WebDev]

jsfiddle.net/ke6onghy/5

Comments

[Anton Filippov]

Спасибо за отклик и попытку, но все равно рамку колбасит

[WebDev]

не колбасит, я обновил

[WebDev]

jsfiddle.net/ke6onghy/5

[WebDev]

jsfiddle.net/ke6onghy/7 вот с шириной, не помню как правильно в этом случае получить ширину, с кастылем сделал))

[Anton Filippov]

kirill-93: спасибо, пытаюсь допилить. Не знаю почему, у меня всё сбросилось на первую версию фиддла, хотя я уже до этого прописывал динамическое изменение ширины и сдвиг влево на нужное кол-во пикселей.

А можете объяснить, что вы сделали кроме z-index'a?

[WebDev]

hover поменял на on(''), напрямую события писать не нужно, нужно через on. Ну остальное и ваше должно работать, это я так, для себя поменял.

[Anton Filippov]

kirill-93: jsfiddle.net/ke6onghy/9 помогите тогда с шириной еще разобраться :)
И вы еще добавили stop, он что делает?

[# a r t u r #]

Антон: Что делает stop? Не дает блоку уползти назад фиксирует его, если убрать stop тот блок будет ездить туда сюда обратно

[# a r t u r #]

Антон: {left: "90px"} - здесь вы устанавливаете размер смещения от левого края в пикселях, далее (1000) это скорость перемещения, попробуйте поставить 100 и тогда блок будет быстрее перемещаться

[WebDev]

jsfiddle.net/ke6onghy/11 Я там ширину руками прописываю, это неправильно. Но мне лень искать)) Как то так.

[WebDev]

Стоп отменяет предыдущую операцию animate. То есть без стоп, если несколько раз навести мышью, то блок будет столько же раз ездить, а со стопом только один

[Anton Filippov]

kirill-93: спасибо за ответы и помощь)
Дальше уже сам :)

[# a r t u r #]

Это не решение, это велосипед

[Anton Filippov]

Артур Селиванов: вроде все норм)
и то, что мне было нужно - понять, где была ошибка, а не научиться гуглить и копировать)

Answer 2

[# a r t u r #]

А Вы не хотите воспользоваться каким-нибудь готовым плагином чтобы избежать велосипеда?

kotweb.ru/for_web_developers/must_have/20-72-menyu...

Или вот Ваш случай:

cyberapp.ru/2012/08/17/colorful-animated-jquery-menu

и вот: (более легкий)

jquerylist.ru/navigation/jquery-sliding-menu.html

Comments

[Anton Filippov]

Спасибо за ответ,
Классная подборка, можно поковыряться в исходниках :)

Но я сейчас в процессе изучения js, и такие элементарные вещи хочу научиться делать сам, занимаюсь этим не в коммерческих целях, а для практики.

[# a r t u r #]

Антон: ну в двух остальных примерах рассмотрена конкретно Ваша задача, учитесь на примерах

[Anton Filippov]

Артур Селиванов: да, спасибо) буду разбираться.

Answer 3

[Златослав Десятников]

Возможно, это то, что Вам нужно. link

Comments

[Anton Filippov]

Вы тоже не прочитали вопрос) Мне не нужно готовое решение, мне нужна практика и понимание.
Тем не менее, спасибо за ответ и ссылку, будет интересно поковыряться в исходниках и проанализировать, почему их код получился в 4 раза больше

[# a r t u r #]

Отличный пример!

[Златослав Десятников]

Антон: Вы меня раскусили. :D

[Златослав Десятников]

Артур Селиванов: а на самом деле, откройте код этого плагина, понимается он нормально. Используется setInterval.

[Anton Filippov]

Златослав Десятников: vicodinchik.github.io/layout-2 сделал. Код 14 строк.

[Златослав Десятников]

Антон: неплохо, но есть лаги в некоторых местах.

[Anton Filippov]

Златослав Десятников: да, я все еще рефакторю код, тут еще выяснилось, что на меньшем экране вообще все косячит, поэтому работа пока не окончена :)

[Anton Filippov]

Златослав Десятников: вроде всё пофиксил, какие-нибудь лаги есть?

[Златослав Десятников]

Антон: сейчас хорошо. :)