Jquery, disable / ignore hover event during fade in / out?

Question

I'm trying to figure out if this is possible.. I have an image map that does fade in / fade out based on hovers over certain parts.. the problem is that when the user hovers to a different area during the fade it finishes the fade it was doing then does the one for the area the mouse was moved to.. if the user moves quickly between a few different areas then the fades appear really jumpy and awkward, so I want to be able to disable the hover event (the fade) during the time that another fade is going on so it just ignores it..

I have thought about using some sort of delay but I don't know if this can work since I would think it would delay the fade too.. any advice is appreciated.

Answer 1

Without seeing your code, your tools are a mix of :animated and jQuerys .stop() method.

That could look like

$('imagemap').hover(function(){
   // only do something if no animation is in process (like fading)
   if(!$(this).is(':animated')){
   }
}, function(){
});

You might also call .stop(true, true) before any .fadeIn() in your chain. That will stop the current animation and jump to the end of the fx queue.

References: :animated selector, .stop(), .is()

Answer 2

I think you are referring to queue buildup problem there. Try using the stop method before the animation method eg:

$(...).stop().fadeIn();

More Info:

http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup

As for smooth animation, you can go for jQuery Easing Plugin.