Stop jQuery events firing during current firing?

Question

It annoys me very much! Basically, I have a div that will eventually have a small menu, and when you hover over another div, that small div moves down and becomes visible (the mouse calls the opposite).

All this works very well, except that if I attach the mouse and mouse very quickly, I become flashing (the jQuery queue catches up, I suppose).

So basically, is there a way to stop this? Can you tell jQuery something like "at this point in time, don't queue anything until the current queue ends"?

I'm still relatively new to jQuery. My code below looks as if it should work, but doesn't seem to stop adding the queue! Please forgive the stupid use of x ++ / y ++ is completely unnecessary in this situation, this was the last thing I tried before posting here.

Anyone who can help?

var x = 0; var y = 0; function hideme() { if (x == 0 && y == 0) { x++; $(unimenu).fadeOut('slow'); $(unimenu).animate({top: "-40px" }, {queue: false, duration: 'slow'}); x = 0; } } function showme() { if (y == 0 && x == 0) { y++ $(unimenu).fadeIn('slow'); $(unimenu).animate({top: "40px" }, {queue: false, duration: 'slow'}); y = 0; } } 

Answer 1

I think you are looking for stop . stop will stop the previous animation. If you stop the previous animations before starting further, you will avoid the queue in tons of animations that cause the problem.

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

You mentioned the demo on the hover hover page having a problem. See this modified version of this demo with a stop. Please note that this is not a problem:

http://jsfiddle.net/WskXt/

Answer 2

no, you cannot delay events because they are triggered by the browser, not jquery. instead, you can queue animation using the queue property. the queue will start the animation only after the previous animation is completed.

Find this page for queue : http://api.jquery.com/animate/

Answer 3

Perhaps take a look at the hoverIntent plugin. http://cherne.net/brian/resources/jquery.hoverIntent.html