Slide Effect happening too many times

Question

Hello all,

I call this functions on onmouseover and onmouseout for several divs.

//Takes effect on divs with id, 62,63,64,65...
function slide_it(id){

    $('#options_'+id).slideToggle('slow');

}

The problem is that if I move my mouse over and then mouse out, then again, mouse over and then mouse out. If I do this several times, the slide effect happens the same number of times I moved my mouse over and out of the div, as expected.

But I can't figure out how I can do this once? I can set a variable, but I have several divs that this function is used by and I can't think of a simple way of doing this rather than storing things into an array, but this is messy!

I really appreciate any help on this that is simple to implement!

Thanks all for any help

Answer 1

try to remove your onmouseover and onmouseout handlers from div which was slided. YOu can do it inside slide_it(id) function

Answer 2

Bind the events with jQuerys one() method: http://api.jquery.com/one/

Answer 3

This is because all effects are added to a effects-queue and played one after the other.

Clearing this queue is simple, just add clearQueue():

function slide_it(id){

    $('#options_'+id).clearQueue().slideToggle('slow');

}

Answer 4

Before you call slideToggle(), use .stop(true), this ends the current animation (if there is one), and since you're chaining, will immediately start the animation you're providing, like this:

$('#options_'+id).stop(true).slideToggle('slow'); 

From the docs:

When .stop() is called on an element, the currently-running animation (if any) is immediately stopped. If, for instance, an element is being hidden with .slideUp() when .stop() is called, the element will now still be displayed, but will be a fraction of its previous height. Callback functions are not called.

Example: if you hover in and out fast, i doesn't wait to finish sliding it, it stops it and begins sliding out as soon as the mouse leaves.