Question

I’m trying to find out if I am doing something wrong or if I found a bug in Jquery! I have a simple dropdown menu that fades in and out on hover. Simple stuff. I use Stop() to make sure nothing loops. The problem is I’ve noticed that if I’m hovering over the menu and then slide off and on really quickly, it will stop the fade animation part way through and pause that way, so I’ll have a partially transparent box. Sometimes it actually stops right before hiding the box, so it’s invisible but still there (you can tell because the cursor is still a pointer finger everywhere the box was just visible).

Here’s the code: http://jsfiddle.net/dillydadally/sjTwc/. You’ll have to quickly hover off and back on to trigger the bug. It’s easiest from the top. It might take you a couple tries.

Is there a better way to do this or is this just an unfortunate error in the way JQuery handles things?

Answer 1

Use .stop(false, true)

http://api.jquery.com/stop/

This will force the animation to jump to the end.