Question

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;
    }
}

Answer 1

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/