CODEWITHSUNDEEP
javascriptjquery
Abs
Abs

Reputation: 57916

Slide Effect happening too many times

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

Upvotes: 2

Views: 1203

Answers (4)

Nick Craver
Nick Craver

Reputation: 630349

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.

Upvotes: 6

edwin
edwin

Reputation: 2821

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');

}

Upvotes: 0

RoToRa
RoToRa

Reputation: 38390

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

Upvotes: 0

arena-ru
arena-ru

Reputation: 1020

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

Upvotes: 0

Related Questions