Question

I’m trying to create an effect similar to the navigation on this site: http://rogwai.com/. I’m fairly close as you can this in this jsFiddle.

It’s working fine if you hover into one li at a time (i.e. from the bottom). If however, you slide horizontally through each list item the ‘follower’ returns to the active position or slides of the end after each item that’s hovered over. Instead it should follow the mouse.

Looking at the code executed on hover out this is completely understandable. What I can’t get my head around is how to make it only return to the active position or slide off the end when the mouse completely leaves the menu.

Hopefully that makes sense – you should see the problem straight away from the jsFiddle.

Thanks in advance.

Answer 1

What you can do is add the mouseenter part to the li as you have it, but put the mouseleave part on the entire ul. This way, the leave will only fire when you mouse out of the entire ul.

http://jsfiddle.net/YZr5b/6/

$('nav.block-system-main-menu ul li:not(.follower)').mouseenter(function() {
    followerMove($(this));
});

$('nav.block-system-main-menu ul').mouseleave(function(){
    followerMove($active);
});

Note, if you are really using jquery 1.2.6 (quite old), you will need to modify this a bit as mouseenter and mouseleave do not exist.