Have Geek Brain

Slide effect happens too many times

I am calling these functions in onmouseover and onmouseout for multiple 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 the mouse over and then pull out with the mouse, then move the mouse over and pull out with the mouse again. If I do this multiple times, the slide effect happens as many times as I clicked on the mouse and out of the div as expected.

But I can't figure out how can I do this one time ? I can set a variable, but I have multiple divs that are being used by this function and I can't think of an easy way to do this, not store things in an array, but it's messy!

I really appreciate any help on this, which is easy to implement!

Thanks everyone for the help

+2


a source to share


4 answers


Before you call slideToggle()

, use .stop(true)

, this ends the current animation (if any), and since you are chaining, immediately start the animation you provide, for example:

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

From the docs :



When .stop()

called on an element, the current animation (if any) stops immediately. If, for example, an element is hidden with .slideUp()

when called .stop()

, the element will now be shown but will be part of its previous height. Callback functions are not called.

Example: if you hover the cursor quickly and quickly, I didn’t wait for it to slide, it stops it and starts jumping out as soon as the mouse leaves.

+4


a source


try removing the onmouseover and onmouseout handlers from the div that was copied. You can do it inside a functionslide_it(id)



0


a source


Bind events using method jQuery

one()

: http://api.jquery.com/one/

0


a source


This is because all the effects are added to the effect queue and played one by one.

Removing this queue is easy, just add clearQueue ():

function slide_it(id){

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

}
0


a source






More articles:


All Articles