Question

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 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.

Answer 1

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