I've created a drop down menu where each main link has a mouseenter and mouseleave event attached that first of all checks if there is a sub nav list associated with the link and then slides the menu into visibility. This works fine if you enter link 1 and leave the dropdown slides in then slides out but if you enter link 1 and then hover over link 2 the slideUp() consistency has gone, ideally i would like to make sure the active menu has closed before the new mouseenter code is run again. Can anyone suggest how I can achieve this?

I've been puzzling over this for a couple of days now.Basically the problem you are facing is that on mouseenter and mouseleave, you need to have some kind of idea about what your expandable bar is doing.It can have four different states, namely: fully expanded, fully contracted, expanding out or contacting.And depending on the state, you need to do different things. For example, if the bar is already contracting when you mouse over it (your mouse having just left a different expandable menu point), you need to catch that, stop the animation, then re-expand the bar.

Also, you could do with a short delay, before contracting the bar, to make sure you haven't left one expandable point, only to hover over another (this would otherwise result in the bar contracting, then expanding again when you move your mouse from point one to point two).

Then there's the matter of the second tier of animation, i.e. fading in the sub-menu points.This starts getting tricky, as you have different animations which need to wait for each other to finish, before running themselves.

Demo 1 uses fadeIn() to animate the sub-menu points, demo 2 just uses show()The disadvantage of demo 1, is that if the user moves their mouse very quickly over the top-level menu points, it is possible to "confuse" the bar and end up hovering over a top-level expandable menu point, without seeing the assosciated sub navigation.I don't know how many users would do this in the real world, but it bugged me.In demo 2 I was not able to reproduce this.

To be complete, here's the code.It has lots of duplication and I hate it. I thought I'd leave a possible refactoring to you.

It also uses the fade effect you wanted and regardless of what the user does with their mouse, the bar no longer gets "confused" (at least I wasn't able to make it show anything unexpected).Updated demo.

Pullo
—
2013-04-19T21:34:24Z —
#4

Still testing.Just noticed that in the above code, all of the instances of: