I am using the bounce animation from JQuery UI:

$('.mydiv').mouseover(function () {
      $(this).effect("bounce", { times:4 }, 300);
});

And I have the old problem of the animation 'queuing' if I hover over them (ie: if I move the mouse over a div rapidly 4 times the animation will occur one after the over 4 times).

Normally I would use .stop() to deal with it, eg:

$('.mydiv').mouseover(function () {
      $(this).stop().effect("bounce", { times:4 }, 300);
});

But in this instance it doesnt make any difference. Does anyone know of a solution?

Using .stop(true) means the animations stop witout pleting the bounce like so:

I am using the bounce animation from JQuery UI:

$('.mydiv').mouseover(function () {
      $(this).effect("bounce", { times:4 }, 300);
});

And I have the old problem of the animation 'queuing' if I hover over them (ie: if I move the mouse over a div rapidly 4 times the animation will occur one after the over 4 times).

Normally I would use .stop() to deal with it, eg:

$('.mydiv').mouseover(function () {
      $(this).stop().effect("bounce", { times:4 }, 300);
});

But in this instance it doesnt make any difference. Does anyone know of a solution?

Using .stop(true) means the animations stop witout pleting the bounce like so:

• javascript
• jquery
• jquery-ui

3 Answers 3

Use the :animated selector with the .is() method to test if the element already has an animation in progress. If so, don't start the bounce:

$('.mydiv').mouseover(function () {
    var $this = $(this);
    if (!$this.is(":animated"))
      $this.effect("bounce", { times:4 }, 300);
});

.stop() accepts two paramters, both of which default to false.

There's param1, or clearQueue --which will clear all other animations behind it from the queue and stop the animation in it's track.

Then there's param2, or jumpToEnd - which will finish the animation immediately.

if you set .stop(true) It should work as intended.

Yes, it's impossible to stop (finish) and dequeue jQueryUI (but not core jQuery) animation with .stop() if it is only... not used twice. :)

It's just a "trick" to change the order of what it performs. So, try this:

$('button').on('click', function(){ $(this).stop(false, true).stop(true, false).animate('bounce') });