Controlling

finish()

returns itself

This method finishes the whole animation chain. All values are set to their corresponding end values and every situation gets fullfilled

rect.animate().move(200, 200).animate().dmove(50,50).size(300,400)

rect.finish() // rect at 250,250 with size 300,400

pause()

returns itself

Pausing an animations is fairly straightforward:

rect.animate().move(200, 200)

rect.mouseover(function() { this.pause() })

play()

returns itself

Will start playing a paused animation:

rect.animate().move(200, 200)

rect.mouseover(function() { this.pause() })
rect.mouseout(function() { this.play() })

reverse()

returns itself

Toggles the direction of the animation or sets it to a specific direction:

// will run from 100,100 to rects initial position
rect.animate(3000).move(100, 100).reverse()

// sets direction to backwards
rect.animate(3000).move(100, 100).reverse(true)

// sets direction to forwards (same as not calling reverse ever)
rect.animate(3000).move(100, 100).reverse(false)

stop()

returns itself

If you just want to stop an animation you can call the stop() method which has two optional arguments:

  • jumpToEnd: Sets the values to the end of the animation
  • clearQueue: Remove all items from queue
rect.animate().move(200, 200)

rect.stop()
// or e.g.
rect.stop(true)

Stopping an animation is irreversable.

Fork me on GitHub