Question

I have a menubar with a jQuery animations. There’s a sliding image effect on it. When you hover over it each item, the image changes, when you hover out of the entire menubar hen it changes to a default menubar.

The problem: However, if you hover out of the entire menubar before the currently active animation completes, it won’t change the to default image mentioned above and you’ll be stuck on the other image till you mouse out again slowly. This happens quite often, and results in the animations getting their directions all messed up.

I need a way to use jQuery to halt all other animations in the middle when I mouse out of the entire menu. So whenever your mouse leaves the entire area, cancel all animation and just animate back to the default.

My JS file is minified, but you can take a look here:
http://designsweeter.com/live/bcmedical/wp-content/themes/designsweeter/scripts/menu.js

Beautified JS:
http://designsweeter.com/live/bcmedical/prettymenu.js

Answer 1

Can’t give a specific answer cause your code’s pretty confusing, but try including this callback.

jQuery('ul.your-menu').mouseout(function() {
    jQuery(this + ' li').stop(true, true).animate(*YOUR CODE HERE - to return to default image*);
}

You’ll need to replace the selectors and .animate code to match your specific situation.

Hope this helps!