Jquery, disable / ignore hover event during fade in / out?
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 dela开发者_Go百科y but I don't know if this can work since I would think it would delay the fade too.. any advice is appreciated.
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()
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.
精彩评论