Question

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 completing the bounce like so:

Answer 1

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