Search code examples
jquerymenujquery-animatemouseovermouseout

Animate a menuhover with recognizing where the active link is

Soo, I have this script: my jsfiddle

As you can see it animates when hovering menu items, but when the li breaks, the active div will ignore that and decides to fly away.

I recommend to visit my link for understanding my question better. Any ideas of how to fix this?

Thank you in advance!
With kind regards,
Jonathan

Solution

  • The animation finds the index of the position of the li hovered (e.g. index = 5 if it's the 5th li), and simply calculates the left-margin of an absolutely positioned element as that many times the width of the hovered item. The animation does nothing to take float dropping into account, including the vertical positioning.

    Rather than this, Animate the left and top properties of the absolutely positioned element to become the same as the hovered item.

    I've done this here: http://jsfiddle.net/q2AVN/7/