How do I prevent JQuery animate calls from getting queued up?

Background

I am working on a project that relies heavily on JQuery .animate(), it occasionally receives external updates via Socket.io that call animate(). When the window is open, everything runs fine and animate calls can run asynchronously.

Problem

However, when the browser is minimized or a different tab is open then开发者_如何学Python reopened, all the animations that should have been run while it was closed are queued up and run in that they were received.

Here is the animate call:

$(div).animate({
  'top': this.topPos(),
  'right': this.rightPos()
}, 100);

Is there a simple way to add on option to the animate() call or call some jquery function or should I just add the appropriate logic to the application?

Thanks.

---

use .stop(true,true) by passing true as both parameters

.stop( [clearQueue], [jumpToEnd] )

clearQueue: A Boolean indicating whether to remove queued animation as well. Defaults to false.

jumpToEnd:  A Boolean indicating whether to complete the current animation immediately. Defaults to false.

in your example it will be applied like:

$(div).stop(true,true).animate({
  'top': this.topPos(),
  'right': this.rightPos()
}, 100);

---

This behaviour was caused by the introduction of requestAnimationFrame, which has been removed as of jQuery 1.6.3rc1 (released yesterday).

See also: http://bugs.jquery.com/ticket/9381

---

You can call stop() on the element being animated before you call animate() again. Like this:

$(div).stop().animate({
  'top': this.topPos(),
  'right': this.rightPos()
}, 100);

It will stop the animations being queued up and fired in one go.

See here for details of stop()

Hope this helps.