timing methods used in example #18

Example #18: falling little boxes

This example first creates 25 little boxes with an inline definition: 
$('#boxparent').repeat().append('<div>').until(25)
  .children().hide();

These 25 boxes shall be animated as falling down with each button click.

A helper function is necessary to animate them in reverse order: 
$.fn.reverse = function() {
  return this.$(this.get().reverse());
}

Try clicking on that button multiple times during animation. With .stop(true,true) and .unwait() all animations are reset at the beginning. 

$('button').on('click').fadeTo('slow',0.3)
  .$('#boxparent div').stop(true,true).unwait()
  .css({top:-300}).show().reverse()
  .each($).animate({top:0},500).wait(100).all()
  .wait(500).fadeOut('slow')
  .$('button').wait(200).fadeTo('slow',1);
⇒
​

Other examples with animations

Other examples with chain interruption

Other examples with closed loops

Other examples with context switch

Other examples with inline attached events

Other examples with instant loops

Other examples with repeat-loops

Other examples with timeouts