jquery - 通过识别活动链接的位置来制作菜单悬停动画

Question

Soo，我有这个脚本：我的 jsfiddle

如您所见，它在悬停菜单项时会产生动画，但是当 li 中断时，活动 div 将忽略它并决定飞走。

我建议访问我的链接以更好地理解我的问题。关于如何解决这个问题的任何想法？

先感谢您！
亲切的问候，
乔纳森

Answer 1

动画找到 li 悬停位置的索引（例如，如果它是第 5 个，则 index = 5 li），并简单地将绝对定位元素的左边距计算为悬停项目宽度的许多倍。动画没有考虑浮动下降，包括垂直定位。

而不是这样，动画绝对定位元素的 left 和 top 属性，使其与悬停的项目相同。

我在这里做了这个：http: //jsfiddle.net/q2AVN/7/

Answer 2

One possible idea is to make menu items not to break. Otherwise it will be hard to rewrite the animation.

In order to do that you can use CSS style white-space: nowrap applied to the parent element (i.e. ul or div) and setting style display: inline-block (instead of float: left) to li elements.