.unwait(continue)

Description: Stop ongoing .wait()s for the selected elements.

continue – boolean, optional
whether to continue the interrupted chain for the selected elements or not
Defaults to false.

If multiple elements are used in a .wait() context and only a subset does .unwait() then the invocation chain can still go on with the remaining elements.


Usage pattern

// $('.some').wait(timeout)…
$('.some').unwait();

Examples with breaking current waits

Example #10: fading submenus with user friendly timeouts

Menu navigation is frustrating when the submenu closes immediately on mouseleave, because sometimes the mouse pointer moves few pixels unintended. That's why we want to build in timeouts on mouseenter and mouseleave to show/hide the corresponding submenu.

With jquery-timing this is just two lines:

$('#menu li')
  .mouseenter($).unwait().wait(200).children('ul').fadeIn()
  ._.mouseleave($).unwait().wait(300).children('ul').fadeOut();

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