CODEWITHSUNDEEP
javascriptjqueryqueue
twistedpixel
twistedpixel

Reputation: 1225

Stop jQuery events firing during current firing?

I am getting really annoyed at this! Basically, I have a div which will eventually have a small menu, and when you mouseover a different div, this little div moves down into view and becomes visible (mouseout causes the opposite).

This all works very nicely except that if I mouseover and mouseout very fast, I get flashing (the jQuery queue catching up, I assume).

So basically, is there a way to stop this from happening? Can you tell jQuery something like "at this point in time, do not queue anything else until current queue has finished"?

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

Anyone able to 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;
    }
}

Upvotes: 4

Views: 1153

Answers (3)

James Montagne
James Montagne

Reputation: 78650

I think what you're looking for is stop. stop will stop previous animations. If you stop previous animations before starting the next, you avoid queueing up tons of animations that are causing your issue.

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

You mentioned the demo on the jquery hover page having the issue. See this modified version of that demo with stop. Notice how it does not have the issue:

http://jsfiddle.net/WskXt/

Upvotes: 2

Kevin Ennis
Kevin Ennis

Reputation: 14456

Maybe look into the hoverIntent plugin. http://cherne.net/brian/resources/jquery.hoverIntent.html

Upvotes: 0

Jeff
Jeff

Reputation: 14279

no, you cannot delay the events because those are raised by the browser, not jquery. instead, you can put the animations into a queue using the queue property. the queue will only run an animation after the previous animation has completed.

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

Upvotes: 0

Related Questions