Modify the hover jquery function

Question

Consider the following: There is a panel (let it be a div element) who's height is controlled using the hover function. The only css property that is animated is height. Both of the animations (on mouse over height+=500px; on mouse out height-=500px) have duration of 10 seconds. Can u imagine this: douring the period of those 20 seconds, you can 'accidentally' roll the mouse in and out at least 10 times.

What jquery does is it remembers all that happened (with the mouse) and chains a looong list of unnecessary animations.

I need u guys to help me prevent this.

user113716 · Accepted Answer · 2011-01-27 18:03:28Z

1

Use the stop()^(docs) method to halt the animation.

Use it as .stop(true,true) to clear the queue, and skip to the end before it begins the new one, though I'm not sure that's what you'd want here.

If your intention is to allow the animation to complete, then use the not-selector^(docs) and the animated-selector^(docs) along with the is()^(docs) method to only run the animation if it is not currently animated.

This will prevent buildup in the queue.

if( $(this).is(':not(:animated)') ) {
     // do the animation
}

answered Jan 27, 2011 at 18:03

user113716

323k64 gold badges454 silver badges441 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adrian Grigore · Accepted Answer · 2011-01-27 18:03:04Z

0

Very simple:

Define a separate boolean variable (lets call it "animating") and set it to true when the animation starts. when the animation ends, set it to false.
In your mouse out / mouse in handlers, ignore any events that occur while animating==true
(Optional): In your animation completed handler, check if the mouse is over or outside the div you are monitoring and trigger the next animation if necessary.

answered Jan 27, 2011 at 18:03

Adrian Grigore

33.4k36 gold badges133 silver badges216 bronze badges

3 Comments

Daniel Birowsky Popeski Over a year ago

can you please specify the "animation completed handler"

Adrian Grigore Over a year ago

@Birowski: I mean the optional callback function you can pass to any jquery animation function. It will be executed once the animation is over. For example see the "complete" parameter in api.jquery.com/animate

Daniel Birowsky Popeski Over a year ago

good idea, the final solution comes combined by both the answers :}

Collectives™ on Stack Overflow

Modify the hover jquery function

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related